预检的响应在Angular 2中具有无效的HTTP状态代码403

时间:2017-08-17 10:40:03

标签: angular .htaccess http cors preflight

我正在使用Angular 2& Ionic 2 app。我不得不换到另一台服务器进行测试,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插件,该插件已启用,并且当我在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>

3 个答案:

答案 0 :(得分:1)

403响应状态表示服务器后端未配置为处理OPTIONS请求的一般问题,包括CORS preflight OPTIONS requests

服务器必须以2xx成功状态(通常为200或204)响应OPTIONS个请求。

如果服务器没有这样做,并且您的请求在一个触发浏览器执行CORS preflight OPTIONS request的请求中,那么您将其配置为响应的Access-Control-*标头没有区别 - 因为如果预检失败,浏览器就会停在那里,并且永远不会继续执行GET请求,问题中的代码片段应该发送。

对于问题中的代码段,代码添加的Authorization标头是触发浏览器执行预检的标题,以及要求服务器处理OPTIONS请求的内容。

配置服务器以正确方式处理OPTIONS请求的答案 - 发送200或204成功消息 - 取决于它运行的服务器软件。问题表明服务器正在运行Apache,因此您可以尝试在.htaccess中添加它:

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

<强>更新

如果您的.htaccess中有某些内容以某种方式限制对/wp-json/wp/v2/users/me的访问,则需要将其包含在<LimitExcept OPTIONS>…</LimitExcept>中;例如:

<LimitExcept OPTIONS>
  Require valid-user
</LimitExcept>

答案 1 :(得分:0)

HttpOptions未向请求附加授权,您需要在选项端点上使用AllowAnonymous

答案 2 :(得分:-1)

你可以轻松搞定!我们马上跟着我吧

  1. 在桌面上创建快捷方式 enter image description here
  2. 右键单击快捷方式,然后单击“属性” enter image description here
  3. 编辑目标媒体资源
  4. enter image description here

    1. 将其设置为“C:\ Program Files(x86)\ Google \ Chrome \ Application \ chrome.exe” - 5。 disable-web-security --user-data-dir =“C:/ ChromeDevSession” enter image description here
    2. 在VIsual Studio Code中,运行ionic serve -l enter image description here
    3. 你会看到新标签打开http://localhost:8100/ionic-lab。您应该知道此链接是在普通的chrome选项卡中打开的,而不是我们设置的“disable-web-security”chrome。 enter image description here
    4. 双击我们设置的快捷方式以打开“disable-web-security”chrome选项卡。然后将http://localhost:8100/ionic-lab粘贴到此标签中。 enter image description here
    5. 因此,在使用woo-commerce-api时我们遇到多个错误的原因是Google的“网络安全”。然后你只是禁用它,你实际上不需要任何CORS扩展。因此,如果已安装,请立即将其删除。

      我为那些学习这门课程的人写的这个解决方案https://www.udemy.com/ionic-3-apps-for-woocommerce-build-an-ecommerce-mobile-app/。这是一个离子电子商务应用程序,使用woo-commerce-api设置和从Wordpress(本地或实时服务器)获取数据。如果您在使用其他非离子语言时遇到问题,它仍然可以正常工作。

      实际上,我已经在Google上进行了大量搜索,以找到这个解决方案。我希望这能帮助你们所有人。现在,我需要去睡觉,因为明天我和我的讲师有关于这个离子项目的最终报告

      见啊! Quy Le