预检的响应在Angular 2中具有无效的HTTP状态代码403 [英] Response for preflight has invalid HTTP status code 403 in Angular 2
问题描述
我正在使用Angular 2& Ionic 2 app。我不得不更换到另一台服务器进行测试，API已停止使用以下错误消息：
I am working with an Angular 2 & Ionic 2 app. I had to change to another server for testing and the API has stopped working with the below error message:
预检的响应具有无效的HTTP状态代码403
Response for preflight has invalid HTTP status code 403
我将此添加到.htaccess
I added this to .htaccess
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
</IfModule>
这是我的角度提供者：
loginUser(data): Observable<any> {
let username: string = data.username;
let password: string = data.password;
let headers: Headers = new Headers();
let url = this.domain + "/wp-json/wp/v2/users/me?context=edit";
let bt = btoa(username + ":" + password);
this.storage.save('bt', {'bt':bt});
headers.append("Authorization", "Basic " + bt);
headers.append('Access-Control-Allow-Headers', 'Content-Type');
headers.append("Content-type", "application/x-www-form-urlencoded");
headers.append('Access-Control-Allow-Origin', '*');
return this.http.get(url, {headers: headers}).map(res => res.json())
}
此外，启用了我为CORS问题启用的chrome插件，该插件已启用，并且在我处于localhost项目时可用于其他情况。
Also, enabled a chrome plugin I have for CORS issues which is enabled and works on other cases when I am on localhost projects.
我尝试了所有我发现的东西，我不知道还能做些什么。
I tried everything I found and I am not sure what else I could do.
检查Chrome开发者控制台上的网络标签，答案是这样的：
Checking the network tab on Chrome Dev Console, the response is this one:
<HTML>
<HEAD>
<TITLE>403 Forbidden</TITLE>
</HEAD>
<BODY>
<H1>Forbidden</H1>
You do not have permission to access this document.
<P>
<HR>
<ADDRESS>
Web Server at my domain here
</ADDRESS>
</BODY>
</HTML>
根据答案，这是我的重写规则以及：
Based on the answers, this is my rewrite rules aswell:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
推荐答案
403响应状态表示服务器的一般问题后端未配置为处理 OPTIONS 请求，包括 CORS预检 OPTIONS 请求。
The 403 response status indicates a general problem with the server backend not being configured to handle OPTIONS requests, including CORS preflight OPTIONS requests.
服务器必须响应到 OPTIONS 具有2xx成功状态的请求 - 通常为200或204。
The server must respond to OPTIONS requests with a 2xx success status—typically 200 or 204.
如果服务器不这样做，以及您的请求，其中一个触发浏览器执行 CORS预检选项请求，那么您将其配置为 Access-Control - * 标头没有区别回应 - 因为如果预检失败，浏览器就会停在那里，永远不会继续前进g GET 请求问题中的代码片段是否要发送。
If the server doesn’t do that, and your request in one that triggers browsers to do a CORS preflight OPTIONS request, then it makes no difference what Access-Control-* headers you have it configured to respond with—because if the preflight fails, the browser stops right there and never moves on to doing the GET request the code snippet in the question is meant to send.
如果是代码片段，请参阅问题，代码添加的授权标题是触发浏览器执行预检的标题，以及需要服务器处理 OPTIONS request。
In the case of code snippet in the question, the Authorization header that code’s adding is what triggers the browser to do a preflight, and what requires the server to handle the OPTIONS request.
配置服务器以正确方式处理 OPTIONS 请求的答案发送200或204成功消息 - 取决于它正在运行的服务器软件。问题表明服务器正在运行Apache，所以你可以尝试在 .htaccess 中添加它：
The answer to configuring the server to handle OPTIONS requests in the right way—to send a 200 or 204 success message—depends on what server software it’s running. The question indicates the server’s running Apache, so you can try adding this in your .htaccess:
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
更新
如果您的 .htaccess 中有某些内容限制访问 / wp-json / wp / v2 / users / me 在某种程度上，您需要将其包装在< LimitExcept OPTIONS> ...< / LimitExcept> ;例如：
If you have something in your .htaccess that’s restricting access to /wp-json/wp/v2/users/me in some way, you need to wrap that in <LimitExcept OPTIONS>…</LimitExcept>; for example:
<LimitExcept OPTIONS>
Require valid-user
</LimitExcept>
这篇关于预检的响应在Angular 2中具有无效的HTTP状态代码403的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
