Reactjs：没有为反应包文件指定访问控制允许来源
[英]Reactjs: access-control-allow-origin not specified for react bundle file
问题描述
In my custom webpack, babel spawed React app, I have the bundle file created.
在我的自定义 webpack 中，babel 生成了 React 应用程序，我创建了包文件。
From the backend(node), I'm sending a HTML file with script tag with the source tag referring to frontend:3000/front_bundle.js .从后端（节点），我正在发送一个 HTML 文件，该文件带有 script 标签，源标签引用frontend:3000/front_bundle.js 。 It works perfectly for custom webpack babel app.它非常适合自定义 webpack babel 应用程序。
However, React app created with create-react-app , when I try to send html file from backend with script tag pointing to bundle file generated by react-scripts.但是，使用create-react-app 创建的React 应用程序，当我尝试从后端发送 html 文件时，脚本标记指向由 react-scripts 生成的包文件。
It says, access to script at http://localhost:2000/bundle.js from origin http://localhost:3000 has been blocked by CORS policy: NO "Access-control-Allow-Origin" header is present on the requested resource It says, access to script at http://localhost:2000/bundle.js from origin http://localhost:3000 has been blocked by CORS policy: NO "Access-control-Allow-Origin" header is present on the requested资源
I have the header set in node,我在节点中设置了 header，
app.use((req,res,next)=>{
res.header("Access-control-allow-origin", "*")
next();
});
also tried app.use(cors());也试过 app.use(cors()); at node.在节点。
at front-end public/index.html, I added crossorigin="anonymous".在前端 public/index.html，我添加了 crossorigin="anonymous"。 Added a proxy in package.json referring to http://localhost:3000.在 package.json 中添加了一个代理，指的是 http://localhost:3000。 Still the same issue.还是同样的问题。
Any suggestion on how to fix this?关于如何解决这个问题的任何建议？
1 个解决方案
解决方案1
-1 2020-08-12 18:46:56
In my custom webpack, babel spawed React app, I have the bundle file created.在我的自定义 webpack 中，babel 生成了 React 应用程序，我创建了包文件。
From the backend(node), I'm sending a HTML file with script tag with the source tag referring to frontend:3000/front_bundle.js .从后端（节点），我正在发送一个 HTML 文件，该文件带有 script 标签，源标签引用frontend:3000/front_bundle.js 。 It works perfectly for custom webpack babel app.它非常适合自定义 webpack babel 应用程序。
However, React app created with create-react-app , when I try to send html file from backend with script tag pointing to bundle file generated by react-scripts.但是，使用create-react-app 创建的React 应用程序，当我尝试从后端发送 html 文件时，脚本标记指向由 react-scripts 生成的包文件。
It says, access to script at http://localhost:2000/bundle.js from origin http://localhost:3000 has been blocked by CORS policy: NO "Access-control-Allow-Origin" header is present on the requested resource It says, access to script at http://localhost:2000/bundle.js from origin http://localhost:3000 has been blocked by CORS policy: NO "Access-control-Allow-Origin" header is present on the requested资源
I have the header set in node,我在节点中设置了 header，
app.use((req,res,next)=>{
res.header("Access-control-allow-origin", "*")
next();
});
also tried app.use(cors());也试过 app.use(cors()); at node.在节点。
at front-end public/index.html, I added crossorigin="anonymous".在前端 public/index.html，我添加了 crossorigin="anonymous"。 Added a proxy in package.json referring to http://localhost:3000.在 package.json 中添加了一个代理，指的是 http://localhost:3000。 Still the same issue.还是同样的问题。
Any suggestion on how to fix this?关于如何解决这个问题的任何建议？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.