Webpack devserver 代理无法解决 CORS 问题

Question

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

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

当我尝试提出请求时，我收到了 cors 错误：

从源访问“http://localhost:5050/”获取 “http://localhost:3000”已被 CORS 策略阻止：响应 预检请求未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。如果不透明的响应满足您的需求，请设置请求的 模式为“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

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

所以你会改变如下：

• 你的proxy配置先取api通过proxy：

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', {
  // ...
});