什麼是跨域請求和如何處理跨域請求

1.什麼是跨域請求

了解什麼叫跨域請求,首先得說說什麼叫同源策略。同源策略是指令碼訪問資料的一種安全策略,簡單的來說同源就是網域名稱，協議，埠相同,指令碼檔案在傳送網路請求給服務端時只有網域名稱,協議,埠都相同才被遊覽器允許傳送,否則傳送的請求就會被遊覽器攔截.

2.遊覽器攔截了什麼

客戶端發出乙個跨域請求給伺服器時,遊覽器會判斷該請求有沒有攜帶資料,沒有攜帶資料請求會被變成乙個安全的get請求傳送給伺服器.否則遊覽器會攔截資料,傳送乙個沒有攜帶資訊的option請求給伺服器,目的就是為了讓伺服器知道有請求訪問了它,此外,不管是什麼請求客戶端都不會接受到伺服器端返回的任何資料.

3.如何處理跨域請求

3.1.什麼是伺服器**

在處理跨域請求之前,先了解什麼是伺服器**.伺服器**簡單的來說就相當於中轉站**網路使用者去取得網路資訊.而伺服器**分為正向**和反向**,下面用兩張圖來解釋正反**.

正向**

如圖正向****的是客戶端,客戶端像**伺服器傳送請求,在**伺服器獲取請求後, 以**伺服器的身份**給伺服器端,伺服器其實是不知道客戶端位址ip的.翻牆軟體就是乙個典型的正向**列子,使用者把請求傳送給**伺服器,**伺服器在以自己的身份傳送給服務端,從而解決網路ip的訪問限制問題。

反向**

如圖反向****的是服務端,客戶端其實並不知道實際的請求位址.使用反向**一方面伺服器端比較安全,一方面加快了對內部伺服器的訪問速度。

3.2.為什麼使用反向**能處理前端跨域問題?

因為同源策略其實只是針對js指令碼的資料請求,伺服器與伺服器之間並沒有同源策略的限制,通過反向**,在本地建立乙個客戶端可以訪問的同源網路,客戶端訪問這個**伺服器,**服務在把資料傳遞給目標位址.這期間客戶端其實訪問的是本地的同源伺服器,並沒有傳送跨域請求。

3.3.vue-cli3中處理跨域請求

在src目錄下建立乙個vue.config.js檔案,檔案中的**如下

module.exports =}}}};

在前端用axios測試一下**是否有用

可以看到請求的位址為**的伺服器位址,並不算跨域請求

3.4.後端express處理跨域請求

在不使用**情況下,也可以用後端處理跨域.原理就是設定允許訪問請求位址,服務端在告訴遊覽器哪些請求不需要攔截。**如下

方法一

//解決跨域 
all(
'*',
function
(req, res, next)
);

方法二

使用中介軟體

const express =
require
('express'
)const cors =
require
('cors'
)express()
use(
cors()
)

3.5.使用nginx反向**解決跨域

server #**http://localhost:3000/給有http://localhost:3001/proxy/路徑的請求 location /proxy/ ...}

把需要反向**的html放到html目錄下,開啟當前目錄的命令列,start nginx啟動伺服器.