对 Url 的发布请求给出了被 cors 策略阻止的错误 [重复]

Posted 2023-02-22

【中文标题】对 Url 的发布请求给出了被 cors 策略阻止的错误 [重复]

【英文标题】：the post request to Url gives error blocked by cors policy [duplicate]

【发布时间】：2021-09-18 14:04:45

【问题描述】：

我正在尝试向URL = "https://sambhav.daily.co/v1/rooms" 发出发布请求，但我收到了被 cors 政策阻止的错误

addRoom(): Observable<any> 
    const headers = new HttpHeaders()
      .set("content-type", "application/json")
      .set("Access-Control-Allow-Origin", "http://localhost:8000")
      .set("Access-Control-Allow-Methods", "GET,POST,PATCH,DELETE,PUT,OPTIONS")
      .set(
        "Access-Control-Allow-Headers",
        "Origin, Content-Type, X-Auth-Token, content-type"
      )
      .set(
        "Authorization",
        `Bearer <API-KEY>`
      );
    return this.http
      .post(URL,  headers: headers )
      .map((response: any) => response.data)
      .catch(this.handleError);
  

我收到的错误

Access to XMLHttpRequest at 'https://sambhav.daily.co/v1/rooms' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

【问题讨论】：

更新您的 服务器 上的代码以允许来自 localhost:8000 的请求。代码中的那些 access-control-* 标头无关紧要，因为它们在客户端上。需要返回这些标头的是服务器。

@RoddyoftheFrozenPeas 我每天都在使用第三方服务并向它发出帖子请求

我不确定，但我猜您正在开发并想针对该服务器进行开发？你需要做的是使用 proxy.conf.json 启动 Angular cli 服务器，检查这个 - angular.io/guide/build#proxying-to-a-backend-server

请注意，如果您确实使用代理配置来解决浏览器中的同源限制，您需要确保您的生产应用程序仍然按预期工作。代理仅在 webpack 开发服务器中提供，您不应该在生产环境中运行。

不要在请求中设置Access-Control-* 标头。它们是响应标头！

【参考方案1】：

来自 Daily 的 Phil。

我认为问题在于您的请求的基本 URL。所有 REST API 调用都使用https://api.daily.co/v1/

因此，在您的情况下，您希望将 POST 发送到 https://api.daily.co/v1/rooms。

如果docs 不清楚，请告诉我。我们现在正在改进它们，您的意见很有价值。

我还建议刷新您的 API 密钥，因为您已将其包含在上面。

【讨论】：

感谢菲尔的支持，我已经解决了这个问题。有没有办法将它嵌入到 Angular 应用程序中？

你的意思是API密钥吗？您不应该在客户端代码中使用它，因为它们会暴露给任何可以查看源代码的人。混淆它的典型方法是让服务器为您调用 API。 Netlify 重定向代理 (docs.netlify.com/routing/redirects/rewrites-proxies/…) 是实现此目的的简单方法。我们在这个演示中使用它们 (github.com/daily-demos/fullscreen-prebuilt-ui)。如果您对此有任何疑问，请随时与我们的支持团队联系。