Webpack devserver 代理无法解决 CORS 问题

Question

我有一个在端口 3000 上运行 webpackdevserver 的 React 应用程序。

我有一个 AWS.NetCore Lambda 服务器在端口 5050 上运行本地主机。

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

CORS 策略阻止了从源“http://localhost:3000”访问“http://localhost:5050/”：对预检请求的响应未通过访问控制检查：无“访问控制-” Allow-Origin' header 出现在请求的资源上。 如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

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

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但这只会返回错误的请求错误。

  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

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

所以你会改变如下：

• 您的代理配置首先通过代理将api转为 go：

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

• 接下来是更改您的代码以正常调用相同的域 + 端口3000 （代理会通过将您配置的端口5050传递给您的服务器来为您执行 rest）：

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