目錄

• 一、跨域是怎麼形成的
• 二、導致跨域的根本原因
• 三、解決方法
• 1 、ONP
• 2、 CORS
• 3 、代www.cppcns.com理轉發

一、跨域是怎麼形成的

當我們請求一個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請求沒有差異，我們只需在服務端設定即可kAeEhoYfF（後端的活）

3 、代理轉發

在前端服務和後端介面服務之間 架設一箇中間代理服務，它的地址保持和前端伺服器一致，那麼：
這樣，我們就可以通過中間這臺伺服器做介面轉發，在開發環境下解決跨域問題，看起來好像挺複雜，其實-cli已經為我們內建了該技術，我們只需要按照要求配置一下即可。

vue.config.js 的devServer（開發環境）裡 配置代理伺服器 通過這個代理伺服器傳送請求 這樣就不純在跨域的問題了 程式碼如下：

module.exports = {
  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
        // 如果請求地址以/api打頭,就出觸發代理機制
        // http://localhost:9588/api/login -> http://localhosthttp://www.cppcns.com:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我們要代理的真實介面地址
        }
      }
    }
  }
}

記得baseURL裡的根路徑 是相對地址，而不能是絕對地址

以上就是ajax請求前端跨域問題原因及解決方案的詳細內容，更多關於ajax跨域問題原因及解決的資料請關注我們其它相關文章！