0

I am getting this error in UI (AngularJs) side.

Access to XMLHttpRequest at https://MyLinuxServer/MyAPI/ from origin https://MyWindowsServer/ has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Deployed my AngularJS project in Windows server (MyWindowsServer) using IIS. Internally it calls APIs (Python) deployed in a Linux Box (MyLinuxServer) based on UI events (like button click).

I have tested the APIs in POSTMAN they are working fine.

The portal is launched successfully and from my local machine I am able to browse my application's dashboard (No API calls during this time) but getting this above error when ever APIs are called (UI event) from Angular side to Linux side.

Can anyone give me some clue to investigate

iPaul
  • 423
  • 1
  • 7
  • 22

1 Answers1

1

First, a bit about CORS:

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.1 A web page may freely embed cross-origin images, stylesheets, scripts, iframes, and videos.[2] Certain "cross-domain" requests, notably Ajax requests, are forbidden by default by the same-origin security policy.

This is a security measure implemented within all browsers to prevent unauthorized websites to render the data using your API. Although your call works on postman, the way postman communicates with your server is different from the actual browser, which implements additional security to improve the user's experience.

Now, to make it work, you can:

1) Disable CORS entirely. This is not safe and should be limited to development environments, but on the other hand, it allows you to get started with your angular app fast.

2) If you are using a domain name, you can:

a) set your current Angular app's address as a valid/permitted CORS address.

b) manually implement the OPTIONS method and set it to return an Access-Control-Allow-Origin header with the response.

My suggestion would be to go with 2a.

As for the specific implementation, please check the api docs for your python(backend) platform of choice.

Simas Joneliunas
  • 2,890
  • 20
  • 28
  • 35
  • Can you pls give me a hint.. how to proceed with the option 2 (a). My backend is not a Django project rather its a simple Python webservice placed in CGI-BIN folder in a linux box – iPaul Nov 19 '19 at 09:20
  • This is entirely related to backend settings and you don't need to take the OS into consideration. As for Django settings, please check the following link for the detailed answer: https://stackoverflow.com/questions/35760943/how-can-i-enable-cors-on-django-rest-framework. One last warning i want to leave here is that the browser ** tends to cache the cors settings between the requests** so you should use `Incognito` mode when configuring CORS to force browser to refetch the CORS settings with each call until you get the Django settigns right (it will take a few tries at least~). – Simas Joneliunas Nov 19 '19 at 09:24
  • Thanks for your suggestion, but mine is not a Django project.. its simple Python backend app placed in CGI-BIN folder. – iPaul Nov 19 '19 at 09:28
  • oh sorry. I read it as `is Django` project. I have had no experience in setting the response headers in a plain python project. You have to look into how headers are built and returned by your api response and then manually add the `Access-Control-Allow-Origin: www.someurl.com` – Simas Joneliunas Nov 19 '19 at 09:42