跨域相关

Ai 摘要：本文介绍了浏览器跨域资源共享（CORS）的概念及其解决方案。跨域是浏览器的安全机制，要求协议、域名和端口一致。解决方案包括：1）后端配置，通过设置`Access-Control-Allow-Origin`响应头允许特定或所有域请求；2）前端配置代理，利用开发服务器（如Vite）中转请求以避免跨域限制。示例代码展示了Express和Vite的具体配置方法。

1，什么是跨域？

跨域全称是跨域资源共享（cross-origin resources sharing，cors），它是浏览器的保护机制，只允许网页请求同一域名下的服务，同一域名的要求是协议、域名和端口号都要保持一致。在前后端分离的项目中，解决跨域问题可以从三种情况下手：配置后端，配置前端，配置服务器。

2，解决跨域

配置后端

浏览器是否启用跨域保护机制是根据后端响应来决定的，多以配置后端是最直接的一种方法，浏览器根据的是响应的Access-Control-Allow-Origin响应头来决定的：

Description

如果这个字段的值是“*”，那么会允许所有请求，如果是一个域名，那么浏览器就不会对这个域名下的请求进行跨域保护：

Access-Control-Allow-Origin: http://localhost:3000

根据后端程序的语言和库的不同，配置 Access-Control-Allow-Origin响应头的方法也不同，如果使用的是 node.js 和 express，那么可以添加 cors 中间件：

const cors = require("cors");
app.use(cors());

cors 默认会允许所有跨域请求，如果要限制指定域名，可以给它的 origin 配置项传递一个字符串或数组，用于指定一个或多个允许跨域的域名：

app.use(cors({ origin: ["http://domain1.com", "http://domain2.com"] }));

配置前端

在前端开发环境中，配置代理，中转请求，因为跨域是浏览器的保护机制，如果脱离的浏览器发送请求，是不会受到跨域保护机制的影响的，所以我们可以使用一个中转服务器来发送和接收请求，前端只需要请求这个中转服务器，并保持和中转服务器的 URL 保持一致即可。一般的前端脚手架工具都支持配置代理，例如 vite、create react app 等，这里以 vite 为例， vite 自带的开发服务器支持设置代理，在 vite.config.js 文件里，我们可以配置 server 配置项下的 proxy 配置，把对 /api 路径的请求代理转发到真实的后端服务路径，再根据需要，对转发的 URL 进行改写。

server: { 
  proxy: { 
    "/api": { 
       target: "http://localhost:5000", 
       changeOrigin:true, 
       rewrite: (path) => path.replace(/^/api/, ""), 
     }, 
   }, 
},

这里的配置项把前端请求的 /api 路径转发到 http://localhost:5000/，并把 /api 这一段删除，因为这里后端提供的 API 中不带 /api 这一段：

/api -> http://localhost:5000 /api/user -> http://localhost:5000/user

这样在开发的时候，就避免了跨域问题。前端应用中可以直接请求 proxy 中配置的 /api 来请求后端服务，不用再写前边的协议、域名和端口了，因为默认是和前端相同的：

fetch("/api");