React多站点Build后请求跨域问题解析与解决方案
在现代Web开发中，React因其高效、灵活的特性，成为了前端开发的首选框架之一。然而，随着项目的复杂度增加，尤其是涉及到多站点部署时，跨域问题往往会成为开发者的一大困扰。本文将详细解析React多站点Build后请求跨域问题的成因，并提供多种解决方案，帮助开发者轻松应对这一挑战。
一、跨域问题的本质
1.1 同源策略的定义
跨域问题的根源在于浏览器的同源策略。所谓同源策略，是指浏览器为了保证用户信息的安全，限制从一个源（协议、域名、端口）加载的文档或脚本与另一个源的资源进行交互。简单来说，如果两个页面的协议、域名或端口不同，它们之间就无法进行直接的资源请求。
1.2 CORS机制
CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种机制，它允许浏览器向跨源服务器发送XMLHttpRequest请求，从而克服同源策略的限制。CORS通过在服务器响应头中添加
Access-Control-Allow-Origin
等字段，来告知浏览器允许哪些源进行跨域请求。
二、多站点Build后的跨域问题
2.1 问题场景
在React多站点项目中，通常会将不同的站点打包生成独立的静态文件，部署到不同的服务器上。此时，如果站点之间存在资源请求，就会触发跨域问题。例如，站点A的页面需要请求站点B的API接口，由于域名不同，浏览器会默认阻止这种请求。
2.2 常见的跨域错误信息
在实际开发中，常见的跨域错误信息包括：
XMLHttpRequest cannot load https://example.com/api/data. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://anotherexample.com’ is therefore not allowed access.
Fetch API cannot load https://example.com/api/data due to access control checks.
三、解决方案
3.1 在后端服务器上配置CORS
3.1.1 基本配置
最直接的解决方案是在后端服务器上配置CORS。以Node.js为例，可以使用
cors
中间件进行配置：
const cors = require(‘cors’);
const express = require(‘express’);
const app = express();
app.use(cors({
origin: [‘https://siteA.com’, ‘https://siteB.com’],
methods: [‘GET’, ‘POST’, ‘PUT’, ‘DELETE’],
allowedHeaders: [‘Content-Type’, ‘Authorization’]
}));
app.listen(3000, () => {
console.log(‘Server is running on port 3000’);
});
3.1.2 动态配置
有时，我们需要根据请求动态设置允许的源，可以使用以下方式：
app.use((req, res, next) => {
const allowedOrigins = [‘https://siteA.com’, ‘https://siteB.com’];
const origin = req.headers.origin;
if (allowedOrigins.includes(origin)) {
res.setHeader(‘Access-Control-Allow-Origin’, origin);
}
next();
});
3.2 在React项目中使用代理（Proxy）
3.2.1 使用http-proxy-middleware
http-proxy-middleware
是一个强大的代理中间件，可以在React项目中配置代理，解决跨域问题。
安装http-proxy-middleware
npm install http-proxy-middleware –save
创建setupProxy.js文件
在React项目的
src
目录下创建
setupProxy.js
文件，配置代理：
const { createProxyMiddleware } = require(‘http-proxy-middleware’);
module.exports = function(app) {
app.use(
‘/api’,
createProxyMiddleware({
target: ‘https://siteB.com’,
changeOrigin: true,
pathRewrite: {
‘^/api’: ”
}
})
);
};
重启项目
配置完成后，重启React项目，代理配置即可生效。
3.2.2 代理配置详解
在代理配置中，
target
指定目标服务器地址，
changeOrigin
设置为
true
表示修改请求头中的
Host
字段，
pathRewrite
用于重写请求路径。
3.3 使用JSONP（非推荐方法）
JSONP（JSON with Padding）是一种利用