【发布时间】：2018-01-25 17:44:34
【问题描述】：
我正在使用 Angular 2 和 Ionic 2 应用程序。我不得不更改到另一台服务器进行测试，API 已停止工作并出现以下错误消息：
预检响应包含无效的 HTTP 状态代码 403
我将此添加到 .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 插件，当我在本地项目上时，该插件已启用并适用于其他情况。
我尝试了所有我找到的东西，但我不确定我还能做什么。
检查 Chrome Dev Console 上的网络选项卡，响应是这个：
<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>
根据答案，这也是我的重写规则：
<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 HTTP 代码用于“禁止”，所以你不能做你想做的事情。
-
如果您仍然启用了该 chrome 插件，则需要禁用它，然后将其关闭。因为否则它只会干扰您的故障排除
-
您是否确认您实际上可以在浏览器中直接导航到该
/wp-json/wp/v2/users/me?context=edit，而在您尝试这样做时也不会收到 403？因为配置问题可能与预检 OPTIONS 无关，而是无论使用什么类型的 HTTP 方法请求该 URL，您都会得到它。也就是说，可能是您的 Apache 配置基本上只是对对该 URL 的任何请求执行“全部拒绝”。问题中的详细信息并未表明是否是这种情况。
标签： javascript angular .htaccess cors preflight