CORS header has information but Angular js $http.get does not work

Question

I am using angular js to consume a rest service . The rest api does return required headers but I get

Response for preflight has invalid HTTP status code 401

and in mozilla I get

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the   remote resource at http://testurl.com:8081/v1/users. (Reason: CORS preflight channel did not succeed).

error

API header returns gives

Server: Apache-Coyote/1.1 
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, PUT, GET, OPTIONS, DELETE
Access-Control-Allow-Headers: x-requested-with, Authorization
Access-Control-Expose-Headers: x-requested-with
Access-Control-Max-Age: 3600
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate 
Pragma: no-cache 
Expires: 0 
X-Frame-Options: DENY
X-Application-Context: application:8081
Content-Type: application/json;charset=UTF-8 
Transfer-Encoding: chunked 
Date: Tue, 05 Jan 2016 14:57:20 GMT

Below is http request

 $http({
         method: 'post',
         url: 'http://testurl.com/v1/users',
         data    : data
         }).then(function successCallback(response) {
         object.sucess=true;
         object.massage=response;
         console.log('success');
         }, function errorCallback(response) {
         object.sucess=true;
         object.massage=response;

         });

Am I doing something wrong or the problem is in header .

You aren't showing the status code for the response headers you've quoted, but the browser says it is 401 (meaning Unauthorized), so you need to address that on the server. — Quentin
– Quentin, Commented Jan 5, 2016 at 15:18
My api works fine from rest client but when I try to use it from angular js app I get this . Server is fine from mobile or rest api — Abdullah Al Noman
– Abdullah Al Noman, Commented Jan 5, 2016 at 15:21
The server is returning the 401. Note that the code you posted is doing a POST, not a GET. — Pointy
– Pointy, Commented Jan 5, 2016 at 15:22
"api works fine from rest client but when I try to use it from angular js app I get this". So all you need to do is to compare headers in both cases. Quite straightforward. — dfsq
– dfsq, Commented Jan 5, 2016 at 15:31
"My api works fine from rest client but when I try to use it from angular js app I get" — Well, obviously! You aren't going to be making the preflight request that the browser says you are responding incorrectly to if you aren't using a regular web app! — Quentin
– Quentin, Commented Jan 5, 2016 at 15:34

Louis Barranqueiro · Accepted Answer · 2016-01-05 17:51:29Z

1

As I read your problem i have also faced this problems and this problem can be resolved from server side as well from client side also by creating proxy server. In server side you need to allow the ip of your system.

Usually their are 3 solutions as i know.

1). Example: As What i do while creating web service in NodeJs(API):

res.setHeader('Access-Control-Allow-Origin', 'http://hostname.com');
// Request methods you wish to allow
// You can write * also for allowing to access that url from all systems which is not done usually for security purposes
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);

Then you can run get as well as post request too.

2). You can also create proxy server to handle that post and put reuests so that communication to that api will be constant

3). You can install CORS plugin in your chrome browser and enable it and you can query to the server side. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-ntp-icon

edited Jan 5, 2016 at 17:51

Louis Barranqueiro

10.3k6 gold badges44 silver badges54 bronze badges

answered Jan 5, 2016 at 17:38

Hemant Nagarkoti

4342 silver badges12 bronze badges

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

1 Comment

Abdullah Al Noman Over a year ago

your answers are invalid . 2.I have added those headers see my headers 2. proxy server is not a option since it undermines performance and then 3. My api will be exposed to everyone so I can not ask all the users to add crome plugin . and yes I tried it does not work :( @Hermant

Abdullah Al Noman · Accepted Answer · 2016-01-07 16:05:54Z

1

I found the solution . It was missing preflight OPTIONS. I had to add those in my back end . Now it works fine .

answered Jan 7, 2016 at 16:05

Abdullah Al Noman

2,8884 gold badges22 silver badges37 bronze badges

Comments

mcfedr · Accepted Answer · 2016-01-06 07:07:16Z

0

You have put Authorization as an allowed header. This is incorrect, instead you need to add Access-Control-Allow-Credentials which will allow this header.

This separate setting controls the browser sending cookies as well as Authorization header

answered Jan 6, 2016 at 7:07

mcfedr

7,9953 gold badges34 silver badges28 bronze badges

1 Comment

mcfedr Over a year ago

Also worth trying, set the allow origin header with a specific value instead of *, I have had problems with that before. You need to take the origin header that the browser is sending and return it

Collectives™ on Stack Overflow

CORS header has information but Angular js $http.get does not work

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related