什么叫跨域

一、跨域简介

跨域，是指在同源策略下（同协议+同域名+同端口），一个网页无法从其他源访问到另一个网页的资源。跨域问题是浏览器的一种安全限制。

举个例子，如果页面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);
});