什麼叫跨域

一、跨域簡介

跨域，是指在同源策略下（同協議+同域名+同埠），一個網頁無法從其他源訪問到另一個網頁的資源。跨域問題是瀏覽器的一種安全限制。

舉個例子，如果頁面A的JavaScript嘗試向頁面B發起AJAX請求，由於同源策略的限制，頁面B會拋出異常，也就是常見的跨域問題。

二、出現原因

出於對用戶安全的考慮，瀏覽器的同源策略限制了一個頁面只能請求相同源伺服器的資源。這種限制確保了兩個源之間的相互獨立，防止惡意代碼向其他網站發起請求，從而保護用戶的隱私和安全。

三、跨域場景

跨域問題通常出現在以下場景中：

1. ajax跨域請求

2. 前端頁面嵌入iframe，iframe頁面和父頁面跨域請求

3. 不同源的跨域資源共享（CORS）請求

4. URL的跳轉，重定向為不同源URL

5. Web Socket連接到不同源的伺服器

四、跨域問題的解決方案

1. JSONP

JSONP是一種跨域請求數據的方式，通過動態創建script標籤，使用回調函數的方式獲取數據，兼容性好，在老版本瀏覽器中仍然能夠使用。

<script>
  function callback(data) {
    console.log(data);
  }
  </script>
  <script src="http://domain.com/data.php?callback=callback"></script>

2. 跨域代理

通過在同源的伺服器上建立一個代理伺服器，將跨域請求轉發到目標伺服器，再將響應返回到請求的頁面。

var express = require('express');
var request = require('request');
var app = express();
app.use('/', function(req, res) {
    var url = 'http://otherdomain.com' + req.url;
    req.pipe(request(url)).pipe(res);
});
app.listen(3000, function() {
    console.log('proxy listening on port 3000!');
});

3. CORS

從瀏覽器端出發，伺服器設置Access-Control-Allow-Origin允許來自其他源的請求，來達到跨域訪問。

res.header("Access-Control-Allow-Origin", "*"); // 允許所有來源訪問  
res.header("Access-Control-Allow-Headers", "X-Requested-With"); // 允許ajax請求頭  
res.header("Access-Control-Allow-Methods", "POST, GET"); // 允許請求方法

4. nginx反向代理（跨域）

通過nginx反向代理伺服器，將其他域名或者IP轉發到一個域名和IP的伺服器上來實現跨域請求。

location /remote/ {
    proxy_pass http://domain.com/;
    proxy_set_header Accept-Encoding '';
    sub_filter 'domain.com' 'otherdomain.com';
}

5. postMessage

postMessage方法是html5新增的特性，可以在兩個窗口之間傳遞消息，通過設置domain來進行跨域傳輸。

// 頁面A
otherWindow.postMessage('hello', 'https://domainB.com');

// 頁面B
window.addEventListener('message', function(event){
    if (event.origin !== 'https://domainA.com') return;
    console.log(event.data);
});