我需要创建代理服务器来防止 CORS 错误吗？

Question

我正在构建一个简单的 React 应用程序，想要显示指定城市的 TripAdvisor 照片。 TripAdvisor 有一个 API 可以执行此操作，当我通过 Postman 发出请求时，没有问题。我完美地得到了数据。当我通过 React 应用程序中的 fetch 调用发出请求时，我收到一个看似经典的 CORS 错误：

访问获取 来自“https://api.content.tripadvisor.com/api/v1/location/[...]” 来源 'http://localhost:3000' 已被 CORS 策略阻止： 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。如果不透明的响应满足您的需求，请设置请求的 模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

我的理解是，这是因为我正在从 localhost 向 tripadvisor.com 拨打电话。这种不匹配导致我的浏览器 (Chrome) 中出现 CORS 错误。我明白了。

我不明白的是anyone如何使用这个API。我的理解是，问题在于 TripAdvisor 没有发送所需的标头（“Access-Control-Allow-Origin”以及我指定的域/IP 地址的值）。

他们发回的 7 个标头是：Date、Content-Type、Content-Length、Connection、x-amzn-RequestId、x-amz-apigw-id、X-Amzn-Trace-Id。

是否需要设置代理服务器作为中间人来绕过CORS不匹配？

使用此 API 的每个人都这样做吗？这对我来说似乎很疯狂。

欢迎所有有识之士。预先感谢。

Answer 1

让我们追根溯源

web server

定义了CORS配置

您的

browser

根据获取网站时从服务器收到的标头强制执行 CORS。

CORS仅适用于Web浏览器发起请求的情况，如果不符合策略，浏览器将阻止请求。这不适用于 Postman 或 Web 服务器。

Access-Control-Allow-Origin

标头告诉浏览器哪个

origin

可以向 Web 服务器发起 HTTP API 调用。

您收到错误消息是因为 Tripadvisor 的 CORS 政策不允许来自

http://localhost:3000

的请求

现在有一个可能的解决方案

1. 假设您的网站托管在 myDomain.com
2. 在

   proxy

   运行您的

   myDomain.com

   ，您的网站将在

   myDomain.com

   调用代理，这将是同源 HTTP API 调用
3. 您在

   myDomain.com

   运行的网络服务器/代理将调用 Tripadvisor API