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屋!