CODEWITHSUNDEEP
angularjshttp-headerscors
Marc
Marc

Reputation: 582

AngularJS not sending request after CORS preflight response

Using AngularJS to call RESTFUL APIs.

When using Chrome browser on IOS, the CORS preflight request's (OPTIONS request's) Accept header gets set to */*,image/webp. The response comes back fine, but the actual GET request never gets sent. As you can see in the response, the Content-Type header gets set to image/webp, which I suspect is causing the problem in AngularJS from moving forward with the GET request.

Is my assumption correct? If so, is the solution to force the server to set the Content-Type to something else ?

Full request headers:

OPTIONS http://www.example.com:8080/resourceABC HTTP/1.1
Host: www.example.com:8080
Connection: keep-alive
Access-Control-Request-Headers: accept, authorization, origin
Access-Control-Request-Method: GET
Origin: http://www.example.com
Accept: */*,image/webp
Referer: http://www.example.com/
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) CriOS/38.0.2125.67 Mobile/12B411 Safari/600.1.4
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

Full response headers:

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Allow: GET,OPTIONS,HEAD
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS
Access-Control-Allow-Headers: X-HTTP-Method-Override, Content-Type, x-requested-with, authorization, accept
Access-Control-Max-Age: 3600
Content-Type: image/webp
Content-Length: 0
Date: Wed, 29 Oct 2014 19:26:37 GMT

Upvotes: 2

Views: 2902

Answers (1)

Christian Gintenreiter
Christian Gintenreiter

Reputation: 21

Hy. I just had the same thing here accessing a REST-Service on a different domain from AngularJS-Service.

Examining the request-headers sent to my REST-Service to see if I do allow everything that is requested from the client lead mit to the following:

Setting 'Access-Control-Allow-Headers' in a way to make sure it contains all items in 'Access-Control-Request-Headers' solved it for me.

Marc I see that in your 'Access-Control-Request-Headers' the header "origin" is requested but in your "Access-Control-Allow-Headers" it's missing.

Sending the following Response-Headers works in my case (appkey is my internal auth-key in header):

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Headers: appkey,content-type

Hope this is clear and it helps. Best regards, Christian

P.S.: "Access-Control-Allow-Headers: *" did not work in my case

UPDATE:

To allow Form-Submit via POST-Request I had to add 'content-type' to 'Access-Control-Allow-Headers'

Upvotes: 2

Related Questions