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

Question

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:

Answer 1

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

Answer 2

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

1. Create a shortcut on your desktop
2. Right-click on the shortcut and click Properties
3. Edit the Target property

4. Set it to "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --5. disable-web-security --user-data-dir="C:/ChromeDevSession"
5. In VIsual Studio Code, run ionic serve -l
6. 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.
7. 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

Answer 3

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>