Webpack devserver代理无法绕过CORS问题

Question

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

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

CORS策略阻止了从来源“http://localhost:3000”获取“http://localhost:5050/”的访问：对飞行前请求的响应没有通过访问控制检查：请求的资源上没有“access-control-allog-origin”标头。如果一个不透明的响应满足您的需要，请将请求的模式设置为“no-cors”，以便在禁用CORS的情况下获取资源。

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

但是它不工作，我没有看到任何不同的设置应用，有人可以帮助吗？

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

我调用服务器的JavaScript是这样的...我也尝试使用urlhttp://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通过代理:

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

null

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