一，跨域是怎么形成的
當我們請求一個url的 協議、域名、埠三者之間任意一個與當前頁面url的協議、域名、埠 不同這種現象我們把它稱之為跨域
跨域會導致：
1、無法讀取非同源網頁的 Cookie、LocalStorage 和 IndexedDB
2、無法接觸非同源網頁的 DOM
3、無法向非同源地址發送 AJAX 請求（可以發送，但瀏覽器會拒絕接受回應）
二，導致跨域的根本原因
導致跨域的根本原因是請求瀏覽器的同源策略導致的 ，而跨域請求報錯的原因是： 瀏覽器同源策略 && 請求是ajax型別 && 請求確實跨域了
三， 解決方法
給大家介紹三種方法 jsonp，cors，代理轉發
1，JSONP
JSONP 是服務器與客戶端跨源通信的常用方法，最大特點就是簡單適用，兼容性好（兼容低版本IE），缺點是只支持get請求，不支持post請求，
原理：img、srcipt，link標簽的src或href屬性不受同源策略限制，可以用來作為請求，后端接受請求后回傳一個回呼函式callback，呼叫前端已經定義好的函式，從而實作跨域請求，
舉個很簡單的例子 ： 我們通過img標簽的src屬性， 請求一個網路地址的圖片 ，這就是非同源請求了 ，但是由于瀏覽器的同源策略只對ajax請求有效所以 我們的請求不會受到影響 ，換句話來說 只有ajax請求才會產生跨域問題，
2，CORS
CORS 是跨域資源分享（Cross-Origin Resource Sharing）的縮寫，它是 W3C 標準，屬于跨源 AJAX 請求的根本解決方法，
CORS允許任何型別的請求，在使用CORS來訪問資料的時候，客戶端不需要更改任何資料訪問邏輯，所有的一切作業都是在服務端及瀏覽器之間自動完成的，前端代碼與發送普通Ajax請求沒有差異，我們只需在服務端設定即可（后端的活）
3，代理轉發
在前端服務和后端介面服務之間 架設一個中間代理服務，它的地址保持和前端服務器一致，那么：
這樣，我們就可以通過中間這臺服務器做介面轉發，在開發環境下解決跨域問題，看起來好像挺復雜，其實vue-cli已經為我們內置了該技術，我們只需要按照要求配置一下即可，
vue.config.js 的devServer（開發環境）里 配置代理服務器 通過這個代理服務器發送請求 這樣就不純在跨域的問題了 代碼如下：
module.exports = {
devServer: {
// ... 省略
// 代理配置
proxy: {
// 如果請求地址以/api打頭,就出觸發代理機制
// http://localhost:9588/api/login -> http://localhost:3000/api/login
'/api': {
target: 'http://localhost:3000' // 我們要代理的真實介面地址
}
}
}
}
}
記得baseURL里的根路徑 是相對地址，而不能是絕對地址
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/316666.html
標籤：其他
上一篇：js實作放大鏡效果(思路+代碼)