Javascript 跨域知识详细介绍

什么是跨域？

在 Web 开发中，当一个网页的脚本程序试图去访问另一个网页中的内容时，如果这两个网页之间的协议、域名、端口号不一致，就会触发浏览器的同源策略产生跨域问题。跨域问题是一个非常常见的问题，也是 Web 开发中必须要面对和解决的问题。

同源策略

同源是指，两个页面拥有相同的协议（http/https）、域名和端口，只有这三者完全相同才被认为是同源。

同源策略是不允许跨域访问操作（如读写 cookie、DOM 操作等），同源策略的设计是为了保证用户数据的安全，防止恶意脚本窃取用户的个人信息。

跨域的解决方案

1. JSONP（ JSON with Padding ）

JSONP利用了 script 标签是不受同源策略限制的特性，通过 script 标签引入一个包含回调函数的 json 文本，从而实现跨域访问。

示例：

// 定义回调函数
function handleData(data) {
  console.log(data);
}

// 动态创建 script 标签，设置请求url
const script = document.createElement('script');
script.src = 'http://example.com/api/data?callback=handleData';

// 把标签插入到html中
document.getElementsByTagName('head')[0].appendChild(script);

2. CORS（ Cross-Origin Resource Sharing ）

CORS实现跨域请求的核心思想是在服务端设置允许跨域访问的响应头，浏览器将在请求时检测响应中是否包含这些允许跨域的头信息，如果有，则浏览器会允许对方访问。

示例：

服务端返回响应头信息：Access-Control-Allow-Origin

Access-Control-Allow-Origin: *

表示允许所有域名访问。

3. 代理

代理就是设置一个中间代理服务器，在这个代理服务器上进行跨域请求，再把数据返回给前端，通过代理，前端可以绕开同源策略直接访问需要的资源。

示例：

fetch('/api/data', {
  method: 'POST',
  credentials: 'include'
})
.then(res => res.json())
.then(res => {
  console.log(res);
})
.catch(err => {
  console.error(err);
})

前端通过fetch请求代理服务器设置了请求地址为 "/api/data"，代理服务器在后台转发请求到 "/domain/api/data" 地址。