Webpack devserver 代理无法解决 CORS 问题

Posted 2023-03-04

【中文标题】Webpack devserver 代理无法解决 CORS 问题

【英文标题】：Webpack devserver proxy not working to get round CORS issue

【发布时间】：2021-02-25 07:15:55

【问题描述】：

我有一个在 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',
    ),
  );

【参考方案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', 
  // ...
);

【讨论】：

非常感谢您的回复。我想我的问题是我使用的是 AWS lambda，所以我真的不知道我是否可以为它创建一个不同的端点，它们似乎都只是在根上，我通过不同的身体。跨度>

api 路径即将了解应该将哪个端点传递给代理，因此它根本不会影响您的服务器，因为它会发送到您的根服务器 url

啊，好吧，对不起，我明白你的意思了。我已经尝试过了，但现在我收到以下错误POST http://localhost:3000/api net::ERR_ABORTED 400 (Bad Request) 有什么想法吗？

您可以在终端查看日志并调试本地服务器以了解有关错误的更多信息。还要检查代理是否也相应地将请求传递给服务器

我想我已经意识到了这个问题，我似乎无法使用普通的 restAPI 连接到端点，它使用的是我使用的“AWS .NET Core 3.1 Mock Lambda 测试工具”认为必须使用 websockets 或其他东西来连接，因为我也在 POSTMAN 中尝试过，但我也无法发布任何内容。我已经接受了答案，因为我认为我正在打一场失败的战斗。