How to fix No 'Access-Control-Allow-Origin' header on angular 1 + ajax + CORS policy?

Question

I do not know how to fix this problem on my code. My code is below:

$http({
            method: 'POST',
            url: "http://urlexample.com.br",
            headers : {                                        
                "Content-Type": "application/x-www-form-urlencoded;charset=utf-8;",                   
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Headers" : "X-Custom-Header",
                "Access-Control-Allow-Credentials": true,            
                "Access-Control-Allow-Methods": "POST",
                "Accept" : "application/x-www-form-urlencoded;charset=utf-8;"
            },                
            data: {
                "username": login,
                "password": senha
            }
        }).then(function (success) {
            callback(success);
        }, function (error) {
            errorCallback(error);
        });

and the errors is this:

"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."

Thanks.

The `http://urlexample.com.br` URL should response with HTTP response header setted in `"Access-Control-Allow-Origin": "*"`. — Danny Fardy Jhonston Bermúdez, Apr 01 '19 at 20:20

score 0 · Accepted Answer · answered Apr 01 '19 at 22:51

Your are getting this error because you are calling the API which is located in a different domain, and this is what CORS (Cross Origin Resource Sharing) policy prevents unless you allow accessing your API from another domaines.

You can solve this error by installing a package in your backend (laravel-cors if you are working with laravel) it depends on the technology you are using.

have a look at this issues, they will help you understanding and fixing the problem

AngularJS performs an OPTIONS HTTP request for a cross-origin resource

CORS: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true

How to fix No 'Access-Control-Allow-Origin' header on angular 1 + ajax + CORS policy?

1 Answers1