1
我正在使用Angular 2 & Ionic 2應用程序。我不得不改變到另一臺服務器進行測試和API已停止與以下錯誤消息的工作：預檢的響應在Angular 2中具有無效的HTTP狀態代碼403
預檢響應具有無效的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())
}
另外，我啓用了一個Chrome插件，用於啓用CORS問題，並在我處於localhost項目時處理其他情況。
我試過了我發現的一切，我不確定我還能做什麼。
檢查在Chrome瀏覽器開發控制檯的網絡選項卡，響應這是一個：
<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插件，則需要將其停用，並將其關閉。因爲否則它只會干擾你的故障排除 – sideshowbarker
你確認你實際上可以直接瀏覽到瀏覽器中的'/ wp-json/wp/v2/users/me？context = edit'，你試試嗎？因爲配置問題可能與預檢選項無關，但是無論使用什麼類型的HTTP方法請求該URL，您都可以獲得配置問題。也就是說，你的Apache配置基本上只是對該URL的任何請求做'全部拒絕'。問題的細節並不表明是否是這種情況。 – sideshowbarker