wordpress 中英文網(wǎng)站模板軟文寫手接單平臺
目錄
1、瀏覽器的同源策略
1.1 源
1.2 同源與非同源
1.3 同源請求與非同源請求
2、跨域受到的限制
3、注意點
4、CORS解決Ajax跨域問題
4.1 CORS概述
4.2 CORS解決簡單請求跨域
4.3 簡單請求與復(fù)雜請求
4.4 CORS解決復(fù)雜請求跨域
4.5 借助CORS庫快速完成配置
5、JSONP解決跨域?
6、配置代理解決跨域
6.1 自己配置代理服務(wù)器
6.2 使用Nginx搭建代理服務(wù)器
6.3 借助腳手架搭建代理服務(wù)器
1、瀏覽器的同源策略
瀏覽器為了確保資源安全，而遵循的一種策略。
1.1 源
源 = 協(xié)議 + 域名 + 端口號
1.2 同源與非同源
1.3 同源請求與非同源請求
所處源與目標源不一致，就是非同源，又稱異源或跨域
2、跨域受到的限制
例如：源A和源B，它們是非同源，則瀏覽器會有如下限制
- DOM訪問限制：源A的腳本不能讀取和操作源B的DOM
- Cookie訪問限制：源A不能訪問源B的cookie
- Ajax響應(yīng)數(shù)據(jù)限制：源A可以給源B發(fā)請求，但是無法獲取源B的響應(yīng)的數(shù)據(jù)
備注：在上述限制中，瀏覽器對Ajax獲取數(shù)據(jù)的限制是影響最大的一個，且實際開發(fā)中經(jīng)常遇到
3、注意點
- 跨域限制僅存在瀏覽器端，服務(wù)端不存在跨域限制
- 即使跨域了，Ajax請求也可以正常發(fā)出，但響應(yīng)數(shù)據(jù)不會交給開發(fā)者
- <link>、<script>、<img>....這些標簽發(fā)出的請求也可能跨域，只不過瀏覽器對標簽跨域不做嚴格限制，對開發(fā)幾乎無影響
4、CORS解決Ajax跨域問題
4.1 CORS概述
CORS全稱：Cross-Origin Resource Sharing（跨域資源共享），是用于控制瀏覽器校驗跨域請求的一套規(guī)范，服務(wù)器依照CORS規(guī)范，添加特定響應(yīng)頭來控制瀏覽器校驗，規(guī)則如下：
- 服務(wù)器明確表示拒絕跨域請求，或沒有表示，則瀏覽器校驗不通過
- 服務(wù)器明確表示允許跨域請求，則瀏覽器校驗通過
備注：使用CORS解決跨域是最正統(tǒng)的方式，且要求服務(wù)器是“自己人”
4.2 CORS解決簡單請求跨域
整體思路：服務(wù)器在給出響應(yīng)時，通過添加Access-Control-Allow-Origin響應(yīng)頭，來明確表達允許某個源發(fā)起跨域請求，隨后瀏覽器在校驗時，直接通過
服務(wù)端核心代碼，以（express框架為例）
const express = require('express')const app = express()const data = [{ id: 123, name: '張三' },{ id: 456, name: '李四' },{ id: 789, name: '趙云' }, ] app.get('/student', (req, res) => {res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')res.send(data) })app.listen(1234, () => {console.log('服務(wù)運行中...') })
4.3 簡單請求與復(fù)雜請求
CORS會把請求分為兩類、分別是：簡單請求、復(fù)雜請求
簡單請求 復(fù)雜請求 請求方法為：GET、HEAD、POST
- 不是簡單請求，就是復(fù)雜請求
- 復(fù)雜請求會自動發(fā)送預(yù)檢請求
請求字段要符合《CORS安全規(guī)范》
簡記：只要不手動修改請求頭，一般都能符合改規(guī)范
請求頭的Content-Type的值只能是以下三種
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded
關(guān)于預(yù)檢請求：
- 發(fā)送時機：預(yù)檢請求再實際跨域請求之前發(fā)出，是由瀏覽器自動發(fā)起的
- 主要作用：用于向服務(wù)器確認是否允許接下來的跨域請求
- 基本流程：先發(fā)起OPTIONS請求，如果通過預(yù)檢，繼續(xù)發(fā)起實際的跨域請求
- 請求頭內(nèi)容：一個OPTIONS預(yù)檢請求，通常會包含如下請求頭
請求頭 含義 Origin? ? ?? 發(fā)起請求的源 Access-Control-Request-Method 實際請求的HTTP方法 Access-Control-Request-Headers 實際請求中使用的自定義頭（如果有的話）
4.4 CORS解決復(fù)雜請求跨域
1、第一步：服務(wù)器先通過瀏覽器的預(yù)檢請求，服務(wù)器需要返回如下響應(yīng)頭
響應(yīng)頭 含義 Access-Control-Allow-Origin 允許的源 Access-Control-Allow-Methods 允許的方法 Access-Control-Allow-Headers 允許的自定義頭 Access-Control-Max-Age
預(yù)檢請求的結(jié)果緩存時間（可選） 服務(wù)端核心代碼：
const express = require('express')const app = express()const data = [{ id: 123, name: '張三' },{ id: 456, name: '李四' },{ id: 789, name: '趙云' }, ]app.options('/student', (req, res) => {res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')res.setHeader('Access-Control-Allow-Method', 'GET')res.setHeader('Access-Control-Allow-Headers', 'a,b,c')res.setHeader('Access-Control-Allow-Age', 9000)res.send() })app.get('/student', (req, res) => {res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')res.send(data) })app.listen(1234, () => {console.log('服務(wù)運行中...') })
4.5 借助CORS庫快速完成配置
上述的配置中需要自己配置響應(yīng)頭，或者需要自己手動封裝中間件，借助cors庫，可以更方便完成配置
1、安裝cors
npm i cors2、簡單配置
app.use(cors())3、完整配置
const corsOption = {origin: 'http://127.0.0.1:5500', // 允許的源methods: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'OPTIONS'], // 允許的方法allowedHeaders: [], // 允許的自定義頭exposedHeaders: [], // 要暴露的響應(yīng)頭optionsSuccessStatus: 200, // 預(yù)檢請求成功的狀態(tài)碼 } app.use(cors(corsOption))
5、JSONP解決跨域?
1、JSONP概述：JSONP是利用了<script>標簽可以跨域加載腳本，且不受嚴格限制的特性，可以說是程序員智慧的結(jié)晶，早起一些瀏覽器不支持CORS時，可以靠JSONP解決跨域
2、基本流程
- 第一步：客戶端創(chuàng)建一個<script>標簽，并將其src屬性設(shè)置為包含跨域請求的URL，同時準備一個回調(diào)函數(shù)，這個回調(diào)函數(shù)用于處理返回的數(shù)據(jù)
- 第二步：服務(wù)端接收到請求后，將數(shù)據(jù)封裝在回調(diào)函數(shù)中并返回
- 第三步：客戶端的回調(diào)函數(shù)被調(diào)用。數(shù)據(jù)以參數(shù)的形式傳入回調(diào)函數(shù)。
3、圖示
4、服務(wù)端核心代碼：
const express = require('express') const app = express()const data = [{ id: 123, name: '張三' },{ id: 456, name: '李四' },{ id: 789, name: '趙云' }, ]app.get('/getData', (req, res) => {res.send(`fn(${JSON.stringify(data)})`) })app.listen(1234, () => {console.log('服務(wù)運行中...') })5、客戶端核心代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button onclick="getData()">獲取數(shù)據(jù)</button></body><script>function fn(data) {console.log(data)}function getData() {const script = document.createElement('script')script.onload = () => {script.remove()}script.src = 'http://127.0.0.1:1234/getData'document.body.appendChild(script)}</script> </html>
6、配置代理解決跨域
6.1 自己配置代理服務(wù)器
借助 http-proxy-middleware 配置代理
const { createProxyMiddleware } = require('http-proxy-middleware')// 攔截所有帶有'/api'的請求,轉(zhuǎn)發(fā)給target app.use('/api',createProxyMiddleware({target: 'https://www.toutiao.com',changOrigin: true, // 允許跨域pathRewrite: {'^/api': '',},}) )6.2 使用Nginx搭建代理服務(wù)器
1. 安裝 Nginx
首先，你需要在你的服務(wù)器上安裝 Nginx。根據(jù)你的操作系統(tǒng)，安裝步驟可能有所不同。
?在 Ubuntu/Debian 系統(tǒng)上：
sudo apt update sudo apt install nginx在 CentOS/RHEL 系統(tǒng)上：
sudo yum install epel-release sudo yum install nginx在 Fedora 系統(tǒng)上：
sudo dnf install nginx安裝完成后，啟動 Nginx 并設(shè)置開機自啟：
sudo systemctl start nginx sudo systemctl enable nginx2、配置 Nginx 作為代理服務(wù)器
接下來，配置 Nginx 作為代理服務(wù)器。你可以編輯 Nginx 配置文件，通常在
/etc/nginx/nginx.conf或/etc/nginx/sites-available/default，具體路徑根據(jù)操作系統(tǒng)和 Nginx 版本可能有所不同。基本的代理配置示例如下：
- 打開配置文件：
sudo nano /etc/nginx/nginx.conf- 添加一個
server塊來配置代理設(shè)置。例如，假設(shè)你想要將所有請求代理到http://backend-server：http {...server {listen 80;server_name your-domain.com;location / {proxy_pass http://backend-server; # 后端服務(wù)器的地址proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}}... }這里的
proxy_pass指令將請求轉(zhuǎn)發(fā)到http://backend-server。你可以根據(jù)需要更改為你實際的后端服務(wù)器地址。
proxy_set_header指令用于設(shè)置轉(zhuǎn)發(fā)請求時的 HTTP 頭信息。- 保存文件并退出編輯器。
- 測試配置是否正確：
sudo nginx -t- 重新加載 Nginx 配置：
sudo systemctl reload nginx3、驗證代理設(shè)置
現(xiàn)在，你可以通過訪問你的代理服務(wù)器地址來驗證是否能夠成功地將請求代理到后端服務(wù)器。例如，訪問
http://your-domain.com，你應(yīng)該能夠看到來自http://backend-server的內(nèi)容。4、其他配置（可選）
根據(jù)需求，你可能還需要進行其他配置，例如：
- 負載均衡： 如果你有多個后端服務(wù)器，可以使用
upstream塊來進行負載均衡。- SSL/TLS 加密： 如果你需要 HTTPS，可以配置 SSL 證書來加密代理流量。
- 緩存： 配置 Nginx 緩存以提高性能。
6.3 借助腳手架搭建代理服務(wù)器
修改
vue.config.js文件：// vue.config.js module.exports = {devServer: {proxy: 'http://localhost:5000', // 代理到你的后端服務(wù)器// 或者使用對象形式配置多個代理/*proxy: {'/api': {target: 'http://localhost:5000',changeOrigin: true,pathRewrite: { '^/api': '' },},},*/}, };