Webpack devserver 代理无法解决 CORS 问题

Question

我有一个 React 应用，它是运行端口 3000 上的 webpackdevserver。

我在端口 5050 上有一个 AWS .NetCore Lambda 服务器运行 localhost。

当我尝试发出请求时出现 cors 错误：

Access to fetch at 'http://localhost:5050/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我希望根据此处的文档使用代理，以便转发我关于使用相同域来解决此问题的请求。

https://medium.com/@drgenejones/proxying-an-external-api-with-webpack-serve-code-and-a-restful-data-from-separate-endpoints-4da9b8daf430

但是它不起作用，我没有看到应用的设置有任何区别，有人可以帮忙吗？

devServer: {
  port: 3000,
  disableHostCheck: true,
  compress: true,
  host: 'localhost',
  proxy: {
    '/': {
      target: 'http://localhost:5050',
      secure: false,
    },
  },
},

我的 JavaScript 调用服务器是这样的...我也尝试过 url http://localhost:3000 但这只是 returns 一个错误的请求错误。

  const result = await fetch('http://localhost:5050', {
    method: 'POST',
    headers: new Headers({ 'Access-Control-Allow-Origin': '*' }),
    body: JSON.stringify({
      method: 'upload',
      test: 'test',
    }),
  });

Answer 1

我想问题是设置 / 可以只获取当前服务器，因此您可能需要区分您的网络应用程序与服务器（很可能通过特定路径，例如 /api，但您可以选择是否将此路径传递给您的代理服务器）。

所以你会改变如下：

您的代理配置首先要api通过代理：

proxy: {
  '/api': {
    target: 'http://localhost:5050',
    pathRewrite: {'^/api' : ''}, // In this case we don't pass `api` path
  }
}

下一步是更改您的代码以正常调用相同的域 + 端口 3000（代理会通过您配置的端口 5050 传递给您的服务器来为您完成剩下的工作）：

const result = await fetch('http://localhost:3000/api', {
  // ...
});

Webpack devserver 代理无法解决 CORS 问题

Webpack devserver proxy not working to get round CORS issue

javascript

c#

cors

webpack

webpack-dev-server