跨域通信

Mon, 14 Oct 2024 00:00:00 +0800

什么是跨域

在了解跨域之前，我们必须要了解一下同源策略。跨域问题其实就是浏览器的同源策略造成的。

同源策略

同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。同源指的是：协议、端口号、域名必须一致。

跨源资源共享（[CORS]，或通俗地译为跨域资源共享）是一种基于 [HTTP] 头的机制，该机制通过允许服务器标示除了它自己以外的其他[源] （域、协议或端口），使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

为什么会产生跨域

下表给出了与 URL wmq.com/dir/page.ht… 的源进行对比的示例:

URL	是否跨域	原因
wmq.com/dir/page.ht…	同源	完全相同
wmq.com/dir/inner/a…	同源	只有路径不同
wmq.com/secure.html	跨域	协议不同
wmq.com:81/dir/etc.htm…	跨域	端口不同 ( http:// 默认端口是80)
news.company.com/dir/other.h…	跨域	主机不同

同源策略：protocol（协议）、domain（域名）、port（端口）三者必须一致。

同源政策主要限制了三个方面：

当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。
当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。
当前域下 ajax 无法发送跨域请求。

源政策的目的主要是为了保证用户的信息安全，它只是对 js 脚本的一种限制，并不是对浏览器的限制，对于一般的 img、或者script 脚本请求都不会有跨域的限制，这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作。

有哪些解决跨域的办法

CORS

CORS: 通过设置服务器端的响应头来允许跨域请求。这需要在服务器端进行配置，以允许特定的来源访问资源。例如，在Node.js的Express框架中，可以使用以下代码来设置CORS：

const express = require('express');
const app = express();

app.use((req, res, next) => {
 res.header('Access-Control-Allow-Origin', '*'); // 允许所有来源访问
 res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); // 允许的请求头
 res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); // 允许的请求方法
 next();
});

// 其他路由和中间件

app.listen(3000, () => {
 console.log('Server is running on port 3000');
});

减少OPTIONS请求次数

在跨域请求中，浏览器会自动处理一些非简单请求的预检流程，这包括"预检请求"（也被称为CORS预检请求）和"OPTIONS请求"。预检请求是发起一个HTTP OPTIONS请求到服务器，以确认目标资源是否支持跨域。这种机制是为了兼容同源策略而产生的，但有时这种额外的请求会导致性能问题。