ajax請求前端跨域問題原因及解決方案
一,跨域是怎麼形成的
當我們請求一個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裡的根路徑 是相對地址,而不能是絕對地址
以上就是ajax請求前端跨域問題原因及解決方案的詳細內容,更多關於ajax跨域問題原因及解決的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 深入淺析同源與跨域,jsonp(函數封裝),CORS原理
- VUE跨域詳解以及常用解決跨域的方法
- 前端面試必會網絡跨域問題解決方法
- vue使用vite配置跨域以及環境配置詳解
- vue 處理跨域問題及解決方法小結