Cross site request error on calling api in Ionic 5

Question

I am learning ionic and i have created a simple signup app in ionic 5.

I am getting this error when i try to call api for posting data.

Access to XMLHttpRequest at 'http://localhost:8888/php_project/mango/signup.php' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I tried by setting headers in my post request but still getting same error. Here are the headers i am setting for post request:

'Access-Control-Allow-Headers': 'Content-Type',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'PUT, POST, GET, OPTIONS, DELETE',

What else need to be done to call api from ionic.

yes, your need to set these headers server-side. Seems like you have PHP as your backend API. this is a good start: https://enable-cors.org/server_php.html — cerkiner, May 25 '20 at 12:56
Thanks @SamErkiner it worked by adding cors headers in my php api file. — Vinit Singh, May 29 '20 at 04:20
@VinitSingh I would appreciate if you can accept my answer. Thanks. — cerkiner, May 29 '20 at 07:22

score 2 · Accepted Answer · answered May 29 '20 at 07:20

This is an issue caused by misconfigured same-origin policy. This policy prevents JavaScript from making requests across domain boundaries, and has spawned various hacks for making cross-domain requests.

To fix this, CORS introduces a standard mechanism that can be used by all browsers for implementing cross-domain requests. The spec defines a set of headers that allow the browser and server to communicate about which requests are (and are not) allowed.

Seems like you have PHP as your backend API. You will need to enable CORS on your backend to be able to connect from UI.

header("Access-Control-Allow-Origin: *");

This is a good start for local development. For more information: https://enable-cors.org/server_php.html

score 1 · Answer 2 · answered May 25 '20 at 02:49

1

This is because your API has enabled CORS and you are trying to call api from non trusted origin(your localhost). You need to allow CORS for http://localhost:8100 in your api environment setting.

answered May 25 '20 at 02:49

Kishor Kunal

247
1
4

refer this - https://stackoverflow.com/questions/10883211/deadly-cors-when-http-localhost-is-the-origin – Kishor Kunal May 25 '20 at 02:50
How to allow cors in environment settings.. do you have any reference. – Vinit Singh May 25 '20 at 04:28
what is your api stack and on which environment is it deployed. – Kishor Kunal May 25 '20 at 04:45
I am just learning. so working on localhost, development environment. – Vinit Singh May 25 '20 at 04:46
If using localhost api then try this. - https://medium.com/@siddhartha.ng/disable-cross-origin-on-chrome-for-localhost-c644b131db19 – Kishor Kunal May 25 '20 at 04:49

Cross site request error on calling api in Ionic 5

2 Answers2