Question

错误如下：

XMLHttpRequest无法加载http://some_url.herokuapp.com/api/some_api/。 No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:3000＆＃39;因此不允许访问。响应的HTTP状态代码为503。

致电

返回this._http.post（requestUrl，JSON.stringify（requestBody），requestOptions）

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

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

Answer 1

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

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

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

有关详细信息，请参阅此文章：

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

Answer 2

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']);
        }
    )
}

如何在Angular 2中创建启用CORS的HTTP请求？

2 个答案: