英文:
How do you setup an API proxy in the CRA dev server?
问题
我在开发一个React应用时遇到了问题。在开发过程中，我的应用运行在localhost:3000上，我的后端服务器（托管/api端点）运行在localhost:80上。前端应用发起对localhost:80/api的请求，但由于同源策略（或缺少CORS），这些请求失败了。我尝试通过在我的package.json中设置代理来解决这个问题，代码如下：
"proxy": "http://localhost:80"
Create-React-App文档中提到，使用代理“告诉开发服务器代理任何未知请求到您的API服务器……”。但出于某种原因，React并没有将对/api的请求代理到localhost:80，而是发出了重定向（HTTP 301）到localhost:80。这导致CORS错误仍然发生。
您可以从网络流量的这个截图中看到，前端正在请求我的/api端点，而后端正在发出重定向信号：
React文档明确表示，使用代理在开发中“避免了CORS问题和错误消息”，因此我期望我有正确的解决方案，但我可能设置得不正确。
是否有一种方法可以在不使用Chrome扩展的情况下防止这些CORS问题？
英文:
I am having issues developing a React app. When in development, my the app runs on localhost:3000 and my backend server (which hosts the /api endpoint) runs on localhost:80. The frontend makes calls to localhost:80/api but they fail because of the same origin policy (or missing CORS). I tried solving the issue by setting up a proxy in my package.json with the following line:
"proxy": "http://localhost:80"
The Create-React-App docs say that using a proxy "tells the development server to proxy any unknown requests to your API server..." Now for whatever reason, rather than proxying requests for /api to localhost:80, React is signaling a redirect (HTTP 301) to localhost:80. This is causing the CORS errors to still occur.
You can see from this screenshot of the network traffic that the front end is making a request for my /api endpoint and the backend is signaling to redirect:
The React docs specifically say that using a proxy "avoids CORS issues and error messages" in development, so I expect that I have the correct solution but I am setting it up the wrong way.
Is there a way I can prevent these CORS problems without using a Chrome extension?
答案1
得分: 1
手动配置代理
根据create-react-app的代理配置文档，您需要创建src/setupProxy.js文件并导出一个函数，该函数将代理中间件添加到Express应用程序中。他们建议使用http-proxy-middleware。
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
followRedirects: true // 这可能会修复重定向问题
})
);
};
- 建议将所有代理逻辑放入此文件中，并从您的
package.json中删除"proxy"字段。 - 您不需要在任何地方导入此文件。
- 此文件仅支持Node.js的语法/特性。
英文:
Configuring the Proxy Manually
Following create-react-app's documentation on configuring the proxy, you need to create the src/setupProxy.js file and export a function that adds a proxy middleware to the Express app. They recommend using http-proxy-middleware.
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
followRedirects: true // This will likely fix the redirect issue
})
);
};
- It is recommended that you put all of your proxy logic into this file and remove the
"proxy"field from yourpackage.json. - You don't need to import this file anywhere.
- This file only supports Node.js syntax/features.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论