AngularJS $http request to Web Service requires CORS

Question

I am writing a service which needs to access a WebService (which I have no control over) - an API which I would like to consume in my application. I have visited the url in question within my browser and the login is successful, and I can see my access token, however when I try to use $http to visit the same page I get errors in the developer console in IE.

angular.module("app").factory("MyService", function($http){
    var serviceUrl = "http://some-web-page/service.asmx/";

    var logOn = function(username, password){
        var getUrl = serviceUrl + "logOn?username="+username+"&password="+password;
        $http.get(getUrl).then(
                function successCallback(response){
                    console.log("Success");
                    console.log(response);
                }, function errorCallback(response){
                    console.log("Error");
                    console.log(response);
                }
        );
    };

    return {
        logOn: logOn
    };
}).config(function($httpProvider){
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

and in the console I am getting

HTML1300: Navigation occurred.
File: home
HTML1503: Unexpected start tag.
File: home, Line: 5, Column: 1
SEC7118: XMLHttpRequest for http://some-web-page/service.asmx/logOn?username=username&password=password required Cross Origin Resource Sharing (CORS).
File: home
SEC7115: :visited and :link styles can only differ by colour. Some styles were not applied to :visited.
File: home

SEC7120: Origin http://localhost not found in Access-Control-Allow-Origin header.
File: home
SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied.

You've to enable CORS in the server (I know you don't have control over the server). It's usually turned off in servers to prevent Cross Site Request Forgeries. — Pirate X
– Pirate X, Commented Dec 16, 2015 at 8:58
Why would someone build an API that cannot be accessed though? Is there another way I can do this? — Josh Brass
– Josh Brass, Commented Dec 16, 2015 at 9:10
I think you're working locally which is creating the issue. You can turn off web security on localhost. But not really sure about production servers - Here you will find steps to turn off -> By Pass CORS — Pirate X
– Pirate X, Commented Dec 16, 2015 at 10:33
I am running a local server (WampServer) and running on localhost. — Josh Brass
– Josh Brass, Commented Dec 16, 2015 at 10:37
navigate to the path of your installation via a command prompt and run the following: Chrome.exe --disable-web-security — Pirate X
– Pirate X, Commented Dec 16, 2015 at 10:41

Yerken · Accepted Answer · 2015-12-16 08:59:26Z

1

You cannot make a query to the remote server from your client side (regardless of which framework you are using, underneath it is all built on top of XMLHttpRequest) unless they enable and implement CORS on their side (server hosted at http://some-web-page/service.asmx/ ). You can make the request to your server and from your server to the remote server instead, however this is not always an ideal solution.

answered Dec 16, 2015 at 8:59

Yerken

1,9421 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Josh Brass Over a year ago

The console isn't explicitly saying that CORS is not enabled on the server - are you sure that's the issue? Also - I've not currently got a server set up so not sure that is an ideal solution for me. Perhaps I will find the need to create a server somewhere down the line but this application is only a read-only application using APIs of different systems currently.

Yerken Over a year ago

Error message may vary on the browser you are using, personally would not rely on that. Some insight on what is the service you are trying to call and what is ur application for could be helpful

Josh Brass Over a year ago

I am calling a third party document management system in order to expose a simple set of functionalities on a new web page - specifically to search for and download documents (in a read-only fashion). Authentication is required.

Yerken Over a year ago

if you are wondering if the service is purposefully blocking "localhost" originated requests, just try to send request from different domain (open console tool and make a get request to the remote server).

Yerken Over a year ago

stackoverflow.com/questions/21455045/… check out this one on how to set proper headers to implement authentication with $http service. If u can provide a link to the service, it could be helpful. Quick side note, based on your explanation regardless of whether service require authentication enabling CORS to every domain opens up a huge deal of vulnerabilities for the service itself.

|

Sudhir · Accepted Answer · 2015-12-16 09:47:07Z

0

For chrome and mozilla there is a plugin called cors install it, There will be no problem like cors. https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/ https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

answered Dec 16, 2015 at 9:47

Sudhir

5791 gold badge11 silver badges29 bronze badges

Collectives™ on Stack Overflow

AngularJS $http request to Web Service requires CORS

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related