javascript - Angular Cross-Origin Request CORS failure, but node http.get() returns successfully - Stack Overflow

admin管理员组

文章数量:1429276

I am trying to access an API using AngularJS. I have checked the API functionality with the following node code. This rules out that the fault lies with

var http = require("http");
url = '={"PER":{"$lt":1.02595675,"$gt":0.67125}}&limit=10';

var request = http.get(url, function (response) {
    var buffer = ""
    response.on("data", function (chunk) {
        buffer += chunk;
    });
    response.on("end", function (err) {
        console.log(buffer);
        console.log("\n");
    });
});

I run my angular app with node http-server, with the following arguments

"start": "http-server --cors -a localhost -p 8000 -c-1"

And my angular controller looks as follows

app.controller('Request', function($scope, $http){
    // functional URL = .php
    $scope.test = "functional";
    $scope.get = function(){

        $http.get('={"PER":{"$lt":1.02595675,"$gt":0.67125}}&limit=10',{
            params: {
                headers: {
                    //'Access-Control-Allow-Origin': '*'
                    'Access-Control-Request-Headers' : 'access-control-allow-origin'
                }
            }
        })
            .success(function(result) {
                console.log("Success", result);
                $scope.result = result;
            }).error(function() {
                console.log("error");
            });
        // the above is sending a GET request rather than an OPTIONS request
    };
});

The controller can parse the w3schools URL, but it consistently returns the CORS error when passed the asterank URL. My app avails of other remedies suggested for CORS on this site (below).

Inspecting the GET requests through Firefox shows that the headers are not being added to the GET request. But beyond that I do not know how to remedy this. Help appreciated for someone learning their way through Angular.

I have tried using $http.jsonp(). The GET request executes successfully (over the network) but the angular method returns the .error() function.

var app = angular.module('sliderDemoApp', ['ngSlider', 'ngResource']);
    .config(function($httpProvider) {
        //Enable cross domain calls
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headersmon['X-Requested-With'];
    });

I am trying to access an API using AngularJS. I have checked the API functionality with the following node code. This rules out that the fault lies with

var http = require("http");
url = 'http://www.asterank./api/kepler?query={"PER":{"$lt":1.02595675,"$gt":0.67125}}&limit=10';

var request = http.get(url, function (response) {
    var buffer = ""
    response.on("data", function (chunk) {
        buffer += chunk;
    });
    response.on("end", function (err) {
        console.log(buffer);
        console.log("\n");
    });
});

I run my angular app with node http-server, with the following arguments

"start": "http-server --cors -a localhost -p 8000 -c-1"

And my angular controller looks as follows

app.controller('Request', function($scope, $http){
    // functional URL = http://www.w3schools./website/Customers_JSON.php
    $scope.test = "functional";
    $scope.get = function(){

        $http.get('http://www.asterank./api/kepler?query={"PER":{"$lt":1.02595675,"$gt":0.67125}}&limit=10',{
            params: {
                headers: {
                    //'Access-Control-Allow-Origin': '*'
                    'Access-Control-Request-Headers' : 'access-control-allow-origin'
                }
            }
        })
            .success(function(result) {
                console.log("Success", result);
                $scope.result = result;
            }).error(function() {
                console.log("error");
            });
        // the above is sending a GET request rather than an OPTIONS request
    };
});

The controller can parse the w3schools URL, but it consistently returns the CORS error when passed the asterank URL. My app avails of other remedies suggested for CORS on this site (below).

Inspecting the GET requests through Firefox shows that the headers are not being added to the GET request. But beyond that I do not know how to remedy this. Help appreciated for someone learning their way through Angular.

I have tried using $http.jsonp(). The GET request executes successfully (over the network) but the angular method returns the .error() function.

var app = angular.module('sliderDemoApp', ['ngSlider', 'ngResource']);
    .config(function($httpProvider) {
        //Enable cross domain calls
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.mon['X-Requested-With'];
    });

• javascript
• angularjs
• node.js
• cors

Share Improve this question Follow asked Mar 22, 2015 at 23:24 Stephen FortuneStephen Fortune 3111 silver badge44 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You should understand one simple thing: even though those http modules look somewhat similar, they are totally different beasts in regards to CORS.

Actually, the node.js http.get() has nothing to do with CORS. It's your server that makes a request - in the same way as your browser does when you type this URL in its location bar and mand to open it. The user agents are different, yes, but the process in general is the same: a client accesses a page lying on an external server.

Now note the difference with angular's $http.get(): a client opens a page that runs a script, and this script attempts to access a page lying on an external server. In other words, this request runs in the context of another page - lying within its own domain. And unless this domain is allowed by the external server to access it in the client code, it's just not possible - that's the point of CORS, after all.

There are different workarounds: JSONP - which basically means wrapping the response into a function call - is one possible way. But it has the same key point as, well, the other workarounds - it's the external server that should allow this form of munication. Otherwise your request for JSONP is just ignored: server sends back a regular JSON, which causes an error when trying to process it as a function call.

The bottom line: unless the external server's willing to cooperate on that matter, you won't be able to use its data in your client-side application - unless you pass this data via your server (which will act like a proxy).

Asterank now allows cross origin requests to their API. You don't need to worry about these workarounds posted above any more. A simple $http.get(http://www.asterank./api/kepler?query={"PER":{"$lt":1.02595675,"$gt":0.67125}}&limit=10') will work now. No headers required.I emailed them about this issue last week and they responded and configured their server to allow all origin requests.

Exact email response from Asterank : "I just enabled CORS for Asterank (ie Access-Control-Allow-Origin *). Hope this helps!"

I was having a similar issue with CORS yesterday, I worked around it using a form, hopefully this helps.

.config(function($httpProvider){
    delete $httpProvider.defaults.headers.mon['X-Requested-With'];
    $httpProvider.defaults.headers.mon = {};
    $httpProvider.defaults.headers.post = {};
    $httpProvider.defaults.headers.put = {};
    $httpProvider.defaults.headers.patch = {};
})

.controller('FormCtrl', function ($scope, $http) {
        $scope.data = {
            q: "test"//,
//            z: "xxx"
        };

        $scope.submitForm = function () {
            var filters = $scope.data;
            var queryString ='';
            for (i in filters){
                queryString=queryString + i+"=" + filters[i] + "&";
            }
            $http.defaults.useXDomain = true;
            var getData = {
                method: 'GET',
                url: 'https://YOUSEARCHDOMAIN/2013-01-01/search?' + queryString,
                headers: {
                    'Content-Type': 'application/json; charset=utf-8'
                }
            };
            console.log("posting data....");
            $http(getData).success(function(data, status, headers, config) {
                console.log(data);
            }).error(function(data, status, headers, config) {
            });
        }
    })

    <div ng-controller="FormCtrl">
        <form  ng-submit="submitForm()">
            First names:   <input type="text" name="form.firstname"> 
            Email Address: <input type="text" ng-model="form.emailaddress">
            <button>bmyutton</button>
        </form>
    </div>

Seems to work with the url you posted above as well..

ObjectA: 0.017DEC: 50.2413KMAG: 10.961KOI: 72.01MSTAR: 1.03PER: 0.8374903RA: 19.04529ROW: 31RPLANET: 1.38RSTAR: 1T0: 64.57439TPLANET: 1903TSTAR: 5627UPER: 0.0000015UT0: 0.00026

I should also add that in chrome you need the CORS plugin. I didn't dig into the issue quite as indepth as I should for angular. I found a base html can get around these CORS restrictions, this is just a work around until I have more time to understand the issue.

After lots of looking around. The best local solution I found for this is the npm module CORS-anywhere. Used it to create AngularJS AWS Cloudsearch Demo.

本文标签：