一、跨域是怎么形成的

當(dāng)我們請(qǐng)求一個(gè)url的 協(xié)議、域名、端口三者之間任意一個(gè)與當(dāng)前頁(yè)面url的協(xié)議、域名、端口 不同這種現(xiàn)象我們把它稱之為跨域

跨域會(huì)導(dǎo)致：
1、無(wú)法讀取非同源網(wǎng)頁(yè)的 Cookie、LocalStorage 和 IndexedDB
2、無(wú)法接觸非同源網(wǎng)頁(yè)的 DOM
3、無(wú)法向非同源地址發(fā)送 AJAX 請(qǐng)求（可以發(fā)送，但瀏覽器會(huì)拒絕接受響應(yīng)）

二、導(dǎo)致跨域的根本原因

導(dǎo)致跨域的根本原因是請(qǐng)求瀏覽器的同源策略導(dǎo)致的 ，而跨域請(qǐng)求報(bào)錯(cuò)的原因是： 瀏覽器同源策略 && 請(qǐng)求是ajax類型 && 請(qǐng)求確實(shí)跨域了

三、解決方法

給大家介紹三種方法 jsonp，cors，代理轉(zhuǎn)發(fā)

1 、JSONP

JSONP 是服務(wù)器與客戶端跨源通信的常用方法。最大特點(diǎn)就是簡(jiǎn)單適用，兼容性好（兼容低版本IE），缺點(diǎn)是只支持get請(qǐng)求，不支持post請(qǐng)求。
原理：img、srcipt，link標(biāo)簽的src或href屬性不受同源策略限制，可以用來(lái)作為請(qǐng)求，后端接受請(qǐng)求后返回一個(gè)回調(diào)函數(shù)callback，調(diào)用前端已經(jīng)定義好的函數(shù)，從而實(shí)現(xiàn)跨域請(qǐng)求。

舉個(gè)很簡(jiǎn)單的例子 ： 我們通過(guò)img標(biāo)簽的src屬性， 請(qǐng)求一個(gè)網(wǎng)絡(luò)地址的圖片 ，這就是非同源請(qǐng)求了 ，但是由于瀏覽器的同源策略只對(duì)ajax請(qǐng)求有效所以 我們的請(qǐng)求不會(huì)受到影響 。換句話來(lái)說(shuō) 只有ajax請(qǐng)求才會(huì)產(chǎn)生跨域問(wèn)題。

2、 CORS

CORS 是跨域資源分享（Cross-Origin Resource Sharing）的縮寫(xiě)。它是 W3C 標(biāo)準(zhǔn)，屬于跨源 AJAX 請(qǐng)求的根本解決方法。

CORS允許任何類型的請(qǐng)求。在使用CORS來(lái)訪問(wèn)數(shù)據(jù)的時(shí)候，客戶端不需要更改任何數(shù)據(jù)訪問(wèn)邏輯。所有的一切工作都是在服務(wù)端及瀏覽器之間自動(dòng)完成的。前端代碼與發(fā)送普通Ajax請(qǐng)求沒(méi)有差異，我們只需在服務(wù)端設(shè)置即可（后端的活）

3 、代理轉(zhuǎn)發(fā)

在前端服務(wù)和后端接口服務(wù)之間 架設(shè)一個(gè)中間代理服務(wù)，它的地址保持和前端服務(wù)器一致，那么：
這樣，我們就可以通過(guò)中間這臺(tái)服務(wù)器做接口轉(zhuǎn)發(fā)，在開(kāi)發(fā)環(huán)境下解決跨域問(wèn)題，看起來(lái)好像挺復(fù)雜，其實(shí)vue-cli已經(jīng)為我們內(nèi)置了該技術(shù)，我們只需要按照要求配置一下即可。

vue.config.js 的devServer（開(kāi)發(fā)環(huán)境）里 配置代理服務(wù)器 通過(guò)這個(gè)代理服務(wù)器發(fā)送請(qǐng)求 這樣就不純?cè)诳缬虻膯?wèn)題了 代碼如下：

module.exports = {
  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
        // 如果請(qǐng)求地址以/api打頭,就出觸發(fā)代理機(jī)制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我們要代理的真實(shí)接口地址
        }
      }
    }
  }
}

記得baseURL里的根路徑 是相對(duì)地址，而不能是絕對(duì)地址

以上就是ajax請(qǐng)求前端跨域問(wèn)題原因及解決方案的詳細(xì)內(nèi)容，更多關(guān)于ajax跨域問(wèn)題原因及解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論