CODEWITHSUNDEEP
jqueryangularjscors
chaitanya k
chaitanya k

Reputation: 249

AngularJS call working in POSTMAN but not working in AngularJS Application - Response to preflight request doesn't pass access control check

I need Cors in angularjs, I am not using cors for webapi ,because i am using the api of others, i am only trying to get data with basic authentication using angularjs , i had tried using POSTMAN it is working fine but using my angularjs application it is not working i had tried a lot but it is showing error as below:

Failed to load resource: the server responded with a status of 401 (Unauthorized) index.html:1 XMLHttpRequest cannot load https://api.url/token. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63122' is therefore not allowed access. The response had HTTP status code 401.

I had tried as sample code as below:

var myApp = angular.module("myApp", ['ngCookies']);
myApp.config(['$httpProvider', function ($httpProvider) {

    $httpProvider.defaults.useXDomain = true;
    $httpProvider.defaults.withCredentials = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
}

]);
myApp.controller("GetDataController", ["$scope", "$http", function ($scope, $http) {
    $scope.GetToken = function () {
        debugger;
        var appdata = $.param({
            grant_type: 'credentials',
            scope: 'Customer',
        });

        $http({
            async: true,
            crossDomain: true,
            method: 'GET',
             url: 'https://api.url.net/token',
             data: appdata,
            headers: {

                "username": "847fd9f9fg9h7h66jl8ljdggff",
                "password": "302kfsg7fhhjh0dgjngfdjd",
                "Authorization": "Basic Mufdnfaffa8439flg8g"

            }
        }).then(function (response) {
            debugger;
            $scope.displaymessage = response.data;

        }, function errorCallback(response) {
            $scope.displaymessage = response;
            console.log(response)
        });
    };

}])

where i should have change as it is working in POSTMAN, why it is not working in my application..

Upvotes: 1

Views: 1565

Answers (1)

mridula
mridula

Reputation: 3283

CORS comes into picture in case of cross domain requests. Meaning, when a request is sent from one domain to another.

Calls from Postman aren't sent from a domain (because Postman is like a 'stand-alone' application and not a website that is hosted with some domain assigned to it). So CORS does not come into picture in this case. This is explained better here.

However, your Angular JS app must be hosted on some domain. Example, localhost or myexample.com. So when the same call is sent from your app, it requires CORS.

CORS has to be implemented on the server, not in the app. The server has to be configured to accept calls from a specific domain or all domains. You will have to contact the owners of the Web API and ask them to implement CORS.

Upvotes: 1

Related Questions