跨域錯誤原因及解決思路
什么原因導致了瀏覽器報跨域錯誤：
跨域錯誤:不同源的ajax請求
瀏覽器向web服務器發起http請求時 ，如果同時滿足以下三個條件時，就會出現跨域問題，從而導致ajax請求失敗：
（1）請求回應雙方url不同源，
雙方url：發出請求所在的頁面 與 所請求的資源的url
同源是指：協議相同，域名相同，埠相同 都相同，
以下就是不同源的：
從http://127.0.0.1:5500/message_front/index.html 請求http://localhost:8080/getmsg
網路中不同源的請求有很多，
（2）請求型別是xhr請求，就是常說的ajax請求，不是請求圖片資源，js檔案,css檔案等
（3）瀏覽器覺得不安全，跨域問題出現的基本原因是瀏覽器的同源策略，同源策略是一個重要的安全策略，它限制一個origin的檔案或者它加載的腳本如何能與另一個源的資源進行互動，
注意，錯誤是發生在瀏覽器端的，請求是可以正常從瀏覽器發到服務器端，服務器也可以處理請求，只是回傳到瀏覽器端時出錯了，
（同時滿足三個條件的跨域請求才會報錯 ：1、不同源的請求 ，2、請求的型別是ajax，3、瀏覽器覺得不安全）
（報錯是由于瀏覽器 認為請求不安全 ，它給報錯了，服務器是能正常收到請求并處理的，）
解決思路
請求回應雙方url不同源
-
服務器代理
請求是ajax
-
改發JSONP
瀏覽器覺得不安全 （后端還是能收到請求的）
-
可以安裝一個瀏覽器插件
allow-control-allow-origin繞過同源策略， -
用postman軟體測驗
-
CORS
（ 不用源的請求 ---服務器代理）（請求的型別是ajax -JSONP）(瀏覽器覺得不安全--COPS)
CORS
CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing），它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制，
CORS需要瀏覽器和服務器同時支持，目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10(ie8通過XDomainRequest能支持CORS)，
參考
跨域錯誤的說明
手寫實作
通過在被請求的路由中設定header頭，可以實作跨域，
app.get('/get', (req, res) => {
// * 表示允許任何域名來訪問
res.setHeader('Access-Control-Allow-Origin', '*')
// 允許指定源訪問
// res.setHeader('Access-Control-Allow-Origin', 'http://www.xxx.com')
res.send()
})( 原理 是給請求的回應加上特殊的回應頭)
這種方案無需客戶端作出任何變化（客戶端不用改代碼），就當跨域問題不存在一樣，
服務端回應的時候添加一個 Access-Control-Allow-Origin 的回應頭
只能解決簡單的get請求方式 復雜的需要 插件 cors
使用cors
它是一個npm包，要單獨下載使用 npm 包 cors
npm i cors當做express中的中間件，注意代碼應該放在頂部
var cors = require('cors')
app.use(cors())可以去掉單個介面內部的res.setHeader
cors ：
1 、前端不需要欄位外的修改，就當跨域問題不存在，
2、是ajax
3、支持各種方式的請求（post 、get ......）
4、瀏覽器的支持不好（標準瀏覽器都支持）
錢多多 ?
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301541.html
標籤：其他