如何在 Angular 2 中发出启用 CORS 的 HTTP 请求？

Posted 2023-03-03

【中文标题】如何在 Angular 2 中发出启用 CORS 的 HTTP 请求？

【英文标题】：How to make CORS-enabled HTTP requests in Angular 2?

【发布时间】：2016-08-14 14:02:20

【问题描述】：

错误如下：

XMLHttpRequest 无法加载 http://some_url.herokuapp.com/api/some_api/。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:3000' 不允许访问。响应的 HTTP 状态代码为 503。

打电话时

return this._http.post(requestUrl, JSON.stringify(requestBody), requestOptions)

我过去在使用 CORS 时遇到过麻烦（使用 Angular 1 时），我记得一旦在服务器端激活了 CORS，我必须转换 http 请求以解析某些HTTP 标头。

我对它应该如何工作感到很困惑，所以非常欢迎任何解释。

【问题讨论】：

这可能是服务器端问题。 API 以 503 响应，所以可能是某种错误处理程序（例如在代理服务中）没有像后端的其余部分一样提供“Access-Control-Allow-Origin”标头？

原来是后端问题。

【参考方案1】：

login(loginDetails:LoginDetails)

    const headers = new HttpHeaders( Authorization: 'Basic ' + btoa(loginDetails.getUserName + ':' + loginDetails.getPassword) );

    this.http.post(this.url,loginDetails,headers,responseType:'text' as 'json').subscribe(
        (result)=>
            console.log(result)
            this.router.navigate(['/home']);
        ,
        err=>
            this.router.navigate(['/registration']);
        
    )

【参考方案2】：

其实这不是 Angular2 的问题，而是服务器端的问题。预检的 OPTIONS 请求需要在其响应中返回 Access-Control-Allow-Origin 标头。

在原始请求中发送 Origin 标头将启用服务器端的 CORS 支持。当浏览器检测到请求的域与调用者的域不同时，会自动添加此标头。

在服务器端实现预检 OPTIONS 请求时要小心，因为不会在此级别发送凭据。它们仅在目标请求中发送。这似乎是问题所在，因为您有 503 错误。您正在尝试检查 OPTIONS 请求是否经过身份验证，但实际上并非如此......

查看这篇文章了解更多详情：

http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

【讨论】：

请注意，网址链接不再有效。