一、為什么會出現跨域問題

點擊打開視頻講解更詳細

出于瀏覽器的同源策略限制，同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響，可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實作，同源策略會阻止一個域的javascript腳本和另外一個域的內容進行互動，所謂同源（即指在同一個域）就是兩個頁面具有相同的協議（protocol），主機（host）和埠號（port）

二、什么是跨域

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

三、非同源限制

• 無法讀取非同源網頁的 Cookie、LocalStorage 和 IndexedDB
• 無法接觸非同源網頁的 DOM
• 無法向非同源地址發送 AJAX 請求

四、跨域解決方法

【1】設定document.domain解決無法讀取非同源網頁的 Cookie問題

因為瀏覽器是通過document.domain屬性來檢查兩個頁面是否同源，因此只要通過設定相同的document.domain，兩個頁面就可以共享Cookie（此方案僅限主域相同，子域不同的跨域應用場景，）

// 兩個頁面都設定
document.domain = 'test.com';

【2】跨檔案通信 API：window.postMessage()

呼叫postMessage方法實作父視窗http://test1.com向子視窗http://test2.com發訊息（子視窗同樣可以通過該方法發送訊息給父視窗）

它可用于解決以下方面的問題：

• 頁面和其打開的新視窗的資料傳遞
• 多視窗之間訊息傳遞
• 頁面與嵌套的iframe訊息傳遞
• 上面三個場景的跨域資料傳遞

// 父視窗打開一個子視窗
var openWindow = window.open('http://test2.com', 'title');
 
// 父視窗向子視窗發訊息(第一個引數代表發送的內容，第二個引數代表接收訊息視窗的url)
openWindow.postMessage('Nice to meet you!', 'http://test2.com');

呼叫message事件，監聽對方發送的訊息

// 監聽 message 訊息
window.addEventListener('message', function (e) {
  console.log(e.source); // e.source 發送訊息的視窗
  console.log(e.origin); // e.origin 訊息發向的網址
  console.log(e.data);   // e.data   發送的訊息
},false);

【3】JSONP

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

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

1、原生實作：

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服務器test.com發出請求，該請求的查詢字串有一個callback引數，用來指定回呼函式的名字
 
// 處理服務器回傳回呼函式的資料
<script type="text/javascript">
    function dosomething(res){
        // 處理獲得的資料
        console.log(res.data)
    }
</script>

2、 jQuery ajax：

$.ajax({
    url: 'http://www.test.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 請求方式為jsonp
    jsonpCallback: "handleCallback",    // 自定義回呼函式名
    data: {}
});

3 、Vue.js

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

【4】CORS

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

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

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

1、原生ajax

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
 
// 前端設定是否帶cookie
xhr.withCredentials = true;
 
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
 
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

2、jQuery ajax

$.ajax({
   url: 'http://www.test.com:8080/login',
   type: 'get',
   data: {},
   xhrFields: {
       withCredentials: true    // 前端設定是否帶cookie
   },
   crossDomain: true,   // 會讓請求頭中包含跨域的額外資訊，但不會含cookie
});

3、vue-resource

Vue.http.options.credentials = true

4、 axios

axios.defaults.withCredentials = true

【服務端設定】

服務器端對于CORS的支持，主要是通過設定Access-Control-Allow-Origin來進行的，如果瀏覽器檢測到相應的設定，就可以允許Ajax進行跨域的訪問，

1、 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");

2、 Nodejs后臺

var http = require('http');
var server = http.createServer();
var qs = require('querystring');
 
server.on('request', function(req, res) {
    var postDatahttps://www.cnblogs.com/mochenxiya/archive/2022/08/18/= '';
 
    // 資料塊接收中
    req.addListener('data', function(chunk) {
        postData += chunk;
    });
 
    // 資料接收完畢
    req.addListener('end', function() {
        postData = https://www.cnblogs.com/mochenxiya/archive/2022/08/18/qs.parse(postData);
 
        // 跨域后臺設定
        res.writeHead(200, {'Access-Control-Allow-Credentials': 'true',     // 后端允許發送Cookie
            'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允許訪問的域（協議+域名+埠）
            /* 
             * 此處設定的cookie還是domain2的而非domain1，因為后端也不能跨域寫cookie(nginx反向代理可以實作)，
             * 但只要domain2中寫入一次cookie認證，后面的跨域介面都能從domain2中獲取cookie，從而實作所有的介面都能跨域訪問
             */
            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'  // HttpOnly的作用是讓js無法讀取cookie
        });
 
        res.write(JSON.stringify(postData));
        res.end();
    });
});
 
server.listen('8080');
console.log('Server is running at port 8080...');

3、 PHP后臺

<?php
 header("Access-Control-Allow-Origin:*");

4、 Apache需要使用mod_headers模塊來激活HTTP頭的設定，它默認是激活的，你只需要在Apache組態檔的, , 或的配置里加入以下內容即可

Header set Access-Control-Allow-Origin *

【5】webpack本地代理

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

案例：

http://localhost:8080/api/v2/tv/modules?for_mobile=1

https://m.douban.com/rexxar/api/v2/tv/modules?for_mobile=1

<template>
  <div id="app">
   
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'App',
  data(){
    return {

    } 
  },
  mounted() {
    axios.get('api/v2/tv/modules?for_mobile=1').then(res => {
      console.log(res)
    })
  },
  methods:{
    
  }
}
</script>

<style scoped>
 
</style>

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {   //  /api 表示將攔截以/api開頭的請求路徑
        target: 'https://m.douban.com/rexxar/api/',  //跨域的域名
        // ws: true,         //是否代理websocked
        changeOrigin: true,  //是否開啟跨域
        pathRewrite:{    //重寫路徑
          '^/api':''    //把/api替換為空字符
        }
      },
    }
  }
})

【6】websocket

Websocket 是 HTML5 的一個持久化的協議，它實作了瀏覽器與服務器的全雙工通信，同時也是跨域的一種解決方案，WebSocket 和 HTTP 都是應用層協議，都基于 TCP 協議，但是 WebSocket 是一種雙向通信協議，在建立連接之后，WebSocket 的 服務器與 客戶端都能主動向對方發送或接收資料，同時，WebSocket 在建立連接時需要借助 HTTP 協議，連接建立好了之后 client 與 server 之間的雙向通信就與 HTTP 無關了，

【7】Nginx反向代理

Nginx 實作原理類似于 Node 中間件代理，需要你搭建一個中轉 nginx 服務器，用于轉發請求，

使用 nginx 反向代理實作跨域，是最簡單的跨域方式，只需要修改 nginx 的配置即可解決跨域問題，支持所有瀏覽器，支持 session，不需要修改任何代碼，并且不會影響服務器性能，

我們只需要配置nginx，在一個服務器上配置多個前綴來轉發http/https請求到多個真實的服務器即可，這樣，這個服務器上所有url都是相同的域 名、協議和埠，因此，對于瀏覽器來說，這些url都是同源的，沒有跨域限制，而實際上，這些url實際上由物理服務器提供服務，這些服務器內的 javascript可以跨域呼叫所有這些服務器上的url，

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 {
	}
}

標籤：其他

上一篇：時間格式的轉換---全

下一篇：認識Vue擴展插件