Response for preflight has invalid HTTP status code 403 in Angular 2

问题

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:

Response for preflight has invalid HTTP status code 403

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>

This on my angular provider:

  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())
  }

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.

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>

回答1:

The 403 response status indicates a general problem with the server backend not being configured to handle OPTIONS requests, including CORS preflight OPTIONS requests.

The server must respond to OPTIONS requests with a 2xx success status—typically 200 or 204.

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.

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.

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]

Update

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>

回答2:

HttpOptions does not append authorization to the request, you need to use AllowAnonymous on the Options endpoints

回答3:

You can get through this very easy! Let's follow me right now

Create a shortcut on your desktop
Right-click on the shortcut and click Properties
Edit the Target property

Set it to "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --5. disable-web-security --user-data-dir="C:/ChromeDevSession"
In VIsual Studio Code, run ionic serve -l
You're gonna see new tab open http://localhost:8100/ionic-lab. You should be aware that this link is opened in the normal chrome tab, not the "disable-web-security" chrome we have set up.
Double click to the shortcut that we have set up to open the "disable-web-security" chrome tab. Then paste http://localhost:8100/ionic-lab into this tab.

So the reason that we get multiple errors when working with woo-commerce-api is this "web-security" by Google. Then you just disable it and you actually don't need any CORS Extensions. So remove them right now if you have installed.

And this solution i write for people who learn this course https://www.udemy.com/ionic-3-apps-for-woocommerce-build-an-ecommerce-mobile-app/. This is an ionic e-commerce app that using woo-commerce-api to set and get data from Wordpress (local or live server). If you have trouble in other language not ionic, it still works fine.

Actually i have done a lot of searchings on Google to find this solution. I hope this helps all of you. Now, i need to go to bed because tomorrow i have a final report about this ionic project with my lecturer 😃

See ya! Quy Le

来源：https://stackoverflow.com/questions/45732915/response-for-preflight-has-invalid-http-status-code-403-in-angular-2

标签

javascript

angular

.htaccess

cors

preflight