创建react应用程序web服务器使用CORS头进行响应

Question

这是一种独特的情况，因为我需要使用来自服务器的CORS头进行响应，但服务器是一个运行react应用程序的create-rect应用程序服务器。

我有2个react应用程序，app1(端口3002(、app2(端口3001(和1个后端(端口3000(。当我从app1向后端(/api(发出请求时，它会向app2发送302重定向。这导致浏览器抛出CORS错误，因为app2没有用access-control-allow-origin标头响应飞行前OPTIONS请求。是否有方法配置CRA开发服务器以使用此标头进行响应？或者这些头可以通过app1上的某个代理添加？

错误

访问'XMLHttpRequesthttp://localhost:3001/'(重定向自'http://localhost:3002/api'(来源'http://localhost:3002'已被CORS策略阻止：请求的资源上不存在"Access Control Allow Origin"标头。

我在app1上尝试过，但没有成功：

src/setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:3000',
changeOrigin: true,
onProxyRes: response => {
response.headers['access-control-allow-origin'] = 'http://localhost:3002';
},
})
);
};

我想也许我需要在app2上向服务器添加一些配置，这样它就会响应飞行前的请求，但我不知道如何。

更新：我找到了node_modules/react-scripts/config/webpackDevServer.config.js并添加了

headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
},

这会将头添加到CORS请求中，但并不是真正的永久解决方案。我想我必须用craco才能做到这一点？

Answer 1

要做到这一点，可以使用craco。在项目根文件夹中：

yarn add -D @craco/craco
touch craco.config.js

craco.config.js

module.exports = {
devServer: {
headers: {
"Access-Control-Allow-Origin": "https://example.com",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
"Access-Control-Allow-Credentials": "true"
},
}
};

注意：这只编辑开发服务器配置。这允许服务器使用cookie启动重定向(允许凭据(。