什麼是跨域？及7種跨域解決方法

来源:https://www.cnblogs.com/mochenxiya/archive/2022/08/18/16597545.html
-Advertisement-
Play Games

一、為什麼會出現跨域問題 點擊打開視頻講解更詳細 出於瀏覽器的同源策略限制。同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。同 ...


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

點擊打開視頻講解更詳細

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

二、什麼是跨域

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

當前頁面url 被請求頁面url 是否跨域 原因
http://www.test.com/ http://www.test.com/index.html 否 同源（協議、功能變數名稱、埠號相同）
http://www.test.com/ https://www.test.com/index.html 跨域 協議不同（http/https）
http://www.test.com/ http://www.baidu.com/ 跨域 主功能變數名稱不同（test/baidu）
http://www.test.com/ http://blog.test.com/ 跨域 子功能變數名稱不同（www/blog）
http://www.test.com:8080/ http://www.test.com:7001/ 跨域 埠號不同（8080/7001）

三、非同源限制

  • 無法讀取非同源網頁的 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 postData = '';
 
    // 數據塊接收中
    req.addListener('data', function(chunk) {
        postData += chunk;
    });
 
    // 數據接收完畢
    req.addListener('end', function() {
        postData = 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本地代理

代理.jpg

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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • js 學習day01andday02
    day1 javascript三種引入方式 三種輸出方式 變數 數據類型 查看數據類型 判斷是否為數字 javascript三種引入方式 行內式 <a href="javascript:alert('hello word')">噠噠噠</a> <div onclick="alert('你好')">我 ...
  • 01 挑戰十分鐘創建一個新的全棧項目
    前端使用 vite 構建，vite 利用了瀏覽器原生的 module 載入，速度極快。創建一個 node 伺服器，使用 koa 框架。簡簡單單，一個全新的全棧項目就搭起來啦。 ...
  • 【uniapp】uniapp 使用uView框架 upload組件壓縮圖片
    tips:如果本文對你有用，請愛心點個贊，提高排名，讓這篇文章幫助更多的人。謝謝大家！比心❤~ 如果解決不了，可以在文末加我微信，進群交流。 技術選型 開發框架： uniapp 主題UI框架： uView 背景 uView框架upload文件上傳組件中沒有h5端控制壓縮的參數，超出文件大小也沒有響應 ...
  • 052_末晨曦Vue技術_處理邊界情況之程式化的事件偵聽器
    程式化的事件偵聽器 點擊打開視頻講解更詳細 現在，你已經知道了 $emit 的用法，它可以被 v-on 偵聽，但是 Vue 實例同時在其事件介面中提供了其它的方法。我們可以： 通過 $on(eventName, eventHandler) 偵聽一個事件 通過 $once(eventName, eve ...
  • 使用VitePress搭建及部署vue組件庫文檔
    每個組件庫都有它們自己的文檔。所以當我們開發完成我們自己的組件庫必須也需要一個組件庫文檔。如果你還不瞭解如何搭建自己的組件庫可以看這裡->從零搭建Vue3組件庫。看完這篇文章你就會發現原來搭建和部署一個組件庫文檔是那麼的簡單。當然部署也不需要你有自己的伺服器，你只要有github即可。由於我們的組件 ...
  • 前端學習筆記（一）——HTML表格（table、tr、td、th、thead、tbody、tfoot標簽）
    大學的時候學過web前端的課，但是主要是講大框架，對於具體的一些概念沒有講那麼細。最後交大作業項目就是用到啥了現場百度啥。 現在工作了，雖然也寫了一些頁面，接觸了echarts，axios，也用過vue+elementui等等，但是發現很多前端的概念我並不懂，還是一知半解的狀態。再加上最近是有考慮這 ...
  • 051_末晨曦Vue技術_處理邊界情況之provide和inject依賴註入
    provide和inject依賴註入 點擊打開視頻講解更詳細 在此之前，在我們描述訪問父級組件實例的時候，展示過一個類似這樣的例子： <google-map> <google-map-region v-bind:shape="cityBoundaries"> <google-map-markers ...
  • 認識Vue擴展插件
    在 Vue 開發中，實現一個功能有很多種方式可以選擇，這依賴於 Vue 強大的功能（指令、混合、過濾、插件等），本文介紹一下插件的開發使用。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類