Angular 2-预检响应具有无效的HTTP状态代码401 [英] Angular 2 - Response for preflight has invalid HTTP status code 401

问题描述

我知道这里已经解决了很多相同的问题，
但不幸的是，他们都没有帮助我:-(.

这是我的问题:
我尝试从本地主机连接到服务器上的REST服务.可以与FF REST插件配合使用，但是我的应用程序会导致以下错误:

I know there a already lot of same solved issues here,
but unfortunately none of them helped me :-(.

Here my problem:
I try to connect from my localhost to my REST service on a server. It works fine with a FF REST plugin, but my application results in following errors:

• 选项 http://.../my_REST_Service/ 401(未经授权)
• XMLHttpRequest无法加载 http://.../my_REST_Service/.
  对预检的响应具有无效的HTTP状态代码401

• OPTIONS http://.../my_REST_Service/ 401 (Unauthorized)
• XMLHttpRequest cannot load http://.../my_REST_Service/.
  Response for preflight has invalid HTTP status code 401

我如何尝试获取所需数据:

How I try to get the data I want:

@Injectable()
export class ModelsComponent implements OnInit {

    private restRoot = 'http://.../my_REST_Service';
    private data;

    constructor(private http: Http) { }

    ngOnInit() {
        this.getModels().subscribe(res => {
            this.data = res; 
            console.log(this.data);
        });
    }

    authHeaders() {
        let username: string = 'xxxx';
        let password: string = 'xxxx';

        let token: string = btoa(username + ":" + password);

        let headers: Headers = new Headers();
        headers.append('Access-Control-Expose-Headers', 'Authorization');
        headers.append('Authorization', 'Basic ' + token);
        headers.append("Access-Control-Allow-Origin", "http://localhost:4200/");
        headers.append("Access-Control-Allow-Methods", "*");
        headers.append("Access-Control-Allow-Headers", "Accept,Accept-Charset,Accept-Encoding,Accept-Language,Authorization,Connection,Content-Type,Cookie,DNT,Host,Keep-Alive,Origin,Referer,User-Agent,X-CSRF-Token,X-Requested-With");
        headers.append("Access-Control-Allow-Credentials", "true");

        return headers;
    }

    getModels(): Observable<any> {
        return this.http.get(this.restRoot, {
                    headers: this.authHeaders(), 
                    withCredentials: true        <- from a similar issue
               }).map(res => res.json());
    }
}

我的服务器的配置如下:

My Server is configured like this:

Header set Access-Control-Allow-Origin "http://localhost:4200"
Header set Access-Control-Allow-Headers "Accept,Accept-Charset,Accept-Encoding,Accept-Language,Authorization,Connection,Content-Type,Cookie,DNT,Host,Keep-Alive,Origin,Referer,User-Agent,X-CSRF-Token,X-Requested-With"
Header set Access-Control-Allow-Methods "*"
Header set Access-Control-Allow-Credentials "true"   
Header set Access-Control-Expose-Headers "Authorization"       <- from a similar issue

我知道还有其他相同/相似的已解决问题.但是我仍然不知道该怎么做或如何去做. 如果有人可以帮助我编写代码，我将非常感谢！

I know there are other same/ similar solved issues. But I still do not know what to do or how to do it. I really appreciate it if someone can help me with my code!!

推荐答案

浏览器在执行HttpGet之前先执行OPTIONS请求，您需要添加一条与HttpGet相同的路由的端点，一个HttpOptions请求，从该端点删除auth并从该端点返回一个200 OK，这应该可以解决您的问题.

The browser does an OPTIONS request before doing your HttpGet, you need to add an endpoint with the same route as the HttpGet, make that an HttpOptions request, remove auth from that endpoint and return a 200 OK from it and that should fix your issue.

这篇关于Angular 2-预检响应具有无效的HTTP状态代码401的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！