No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin


#1

Hi, my name is Joshua, I’m new with Ionic and Angular and I’m trying to develop a and Ionic app with a Rest api for the login, but, when I try to consume the api with the URL, I get some troubles and I would like to know if someone has faced with this situation before and knows a solution that I do not know.

The function to consume the api that I have, is this:

Where “credentials” are the parameters (email, password, remember_me), and “type” is an extension for the api´s url.

and… the ‘error’ I get when I try to run on my android device, is this…

an “Access-Control-Allow-Origin” error.
So… I would like to know if one of you knows something about this message and how to fix it.
Thank you in advance.

Aditional information: I tried to set a proxy in the ionic.config.json and It works on webbrowsers, but still doesn’t work on devices.


#2

This situation basically happens when your request is not authorized by your rest API server(backend). This error is also known as CORS(Cross-origin resource sharing) error. You have to give permission from your rest API server. If you are using PHP as rest API server language the try this:

header("Access-Control-Allow-Origin: *"); // Allow all request Url eg. http://localhost:8080, http://127.0.0.1:8080, http://192.168.0.1:8080 etc.
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS'); // Allow API methods

You can either put individual IPs or use ‘*’ as allow all requests.

If you are using any other language/framework as your rest API server then please let us know.

Also, according to your second image you are trying to hit the login API with two ‘/’.

http://test-dli-nuvem.mx/api/auth//login
try removing the extra ‘/’.
http://test-dli-nuvem.mx/api/auth/login

Let me know if these help.