什么是跨域

當一個請求url的協議、域名、埠三者之間任意一個與當前頁面url不同即為跨域，

跨域指的是瀏覽器不能執行其它網站的腳本，是由瀏覽器的同源策略造成的，是瀏覽器對JavaScript 施加的安全限制，

有一點必須要注意：跨域并不是請求發不出去，請求能發出去，服務端能收到請求并正常回傳結果，只是結果被瀏覽器攔截了，之所以會跨域，是因為受到了同源策略的限制，同源策略要求源相同才能正常進行通信，即協議、域名、埠號都完全一致，

什么是同源策略？

協議號 - 域名 - 埠號 ，只有當這三個條件同時滿足相同時，我們就稱之為符合同源策略，同源策略也可以看做是一個協議，

https://  www.baidu.com   :8080    /test
協議號         域名        埠號    路徑

通常我們導航的url都是由這四部分組成的，

同源策略限制從一個源加載的檔案或腳本如何與來自另一個源的資源進行互動，這是一個用于隔離潛在惡意檔案的關鍵的安全機制，它的存在可以保護用戶隱私資訊，防止身份偽造等(讀取Cookie)，

同源策略限制行為：

Cookie、LocalStorage和IndexDB無法讀取；

無法獲得非同源網頁的 DOM節點；

AJAX請求不能發送；

但是有三個標簽允許跨域加載資源：

<img src=XXX> 
<link href=XXX> 
<script src=XXX>

跨域解決方法

1.Proxy代理

webpack本地代理

【前端解決：只適用于本地開發環境，上線了解決不了，直接把dist放在后端服務器中】

Proxy通過服務端介面轉發來實作對于跨域問題的問題，因為HTTP同源策略只在瀏覽器中生效，這里介紹幾種不同Proxy代理方法：

在vue.config.js中利用 WebpackDevServer 配置本地代理

// 配置實體：
module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'xxx',
        pathRewrite: {
          '^/api': ''
        },
        changeOrigin: true
      }
    }
  }
};

注意：專案上線需要把打包后的檔案放在服務器上運行，而不是啟動腳手架運行，也就沒有內置web服務器做代理，所以此方式只適用于開發測驗階段

上線時需要使用nginx代理或者服務器配置cors(每種語言有自己不同的配置方式)

參考：Vue中如何解決跨域問題

Nginx反向代理

server {
 
    #nginx監聽所有localhost:8080埠收到的請求
    listen       8080;
    server_name  localhost;
 
    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;
    #localhost:8080 會被轉發到這里
    #同時, 后端程式會接收到 "192.168.25.20:8088"這樣的請求url
    location / {
        proxy_pass http://192.168.25.20:8088;
    }
    #localhost:8080/api/ 會被轉發到這里
    #同時, 后端程式會接收到 "192.168.25.20:9000/api/"這樣的請求url
    location /api/ {
        proxy_pass http://192.168.25.20:9000;
    }
    error_page 404 /404.html;
        location = /40x.html {
    }
    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
}

參考：什么是跨域？及7種跨域解決方法

2.跨域資源共享 CORS

目前最主流、最簡單的方案，直接讓后端設定回應頭，允許資源共享就ok了

CORS 是跨域資源分享（Cross-Origin Resource Sharing）的縮寫，它是 W3C 標準，屬于跨源 AJAX 請求的根本解決方法，

1、普通跨域請求：只需服務器端設定Access-Control-Allow-Origin
2、帶cookie跨域請求：前后端都需要進行設定

【前端設定】根據xhr.withCredentials欄位判斷是否帶有cookie

vue框架

vue-resource
```
Vue.http.options.credentials = true
```

axios
```
axios.defaults.withCredentials = true
```

【服務端設定】

服務器端對于CORS的支持，主要是通過設定Access-Control-Allow-Origin來進行的，如果瀏覽器檢測到相應的設定，就可以允許Ajax進行跨域的訪問，若后端設定成功，前端瀏覽器控制臺則不會出現跨域報錯資訊，反之，說明沒設成功，

Java后臺

/*
 * 匯入包：import javax.servlet.http.HttpServletResponse;
 * 介面引數中定義：HttpServletResponse response
 */
 
// 允許跨域訪問的域名：若有埠需寫全（協議+域名+埠），若沒有埠末尾不用加'/'
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 
 
// 允許前端帶認證cookie：啟用此項后，上面的域名不能為'*'，必須指定具體的域名，否則瀏覽器會提示
response.setHeader("Access-Control-Allow-Credentials", "true"); 
 
// 提示OPTIONS預檢時，后端需要設定的兩個常用自定義頭
response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

參考：什么是跨域？及7種跨域解決方法

3.JSONP

JSONP 是服務器與客戶端跨源通信的常用方法，最大特點就是簡單適用，兼容性好（兼容低版本IE），缺點是只支持get請求，不支持post請求，

核心思想：網頁通過添加一個<script>元素，向服務器請求 JSON 資料，服務器收到請求后，將資料放在一個指定名字的回呼函式的引數位置傳回來，

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

作者：愛喝酸奶的吃貨出處：http://www.cnblogs.com/yingzi1028/ 本博客文章大多為原創，轉載請請在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/505538.html

標籤：其他

上一篇：IOS微信的sessionStorge存盤超過限度導致程式無法執行問題

下一篇：前端面試題JavaScript篇——2022-09-07

什么是跨域？及跨域解決方法