Angular $resource calls not accepted by Access Control Allow with Safari vs. accepted with Chrome

Question

I've been a bit stuck on this for a while now, and since I'm new to angular and web development I don't know where to look.

I've built a simple service that makes calls to a RESTapi which is set to accept Cross Origin calls, using the $resource service in Angular:

angular.module('vinifyApp')
.factory('WinesVinibar',function($resource){
return $resource('http://devinify1.herokuapp.com/wines/');    
})
.controller('GetWinesVinibarCtrl', function($scope, WinesVinibar){
$scope.WINES = WinesVinibar.query();
}

I have tested this service locally and on heroku, it works fine with Chrome and Firefox. Here are the request and response for Chrome:

Request
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Host:devinify1.herokuapp.com
Origin:http://mobilevinify.herokuapp.com
Referer:http://mobilevinify.herokuapp.com/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML,     like Gecko) Chrome/31.0.1650.63 Safari/537.36
Response Headersview source
Access-Control-Allow-Origin:*
Allow:GET, POST, HEAD, OPTIONS
Connection:keep-alive
Content-Type:application/json
Date:Mon, 09 Dec 2013 16:16:36 GMT
Server:gunicorn/18.0
transfer-encoding:chunked
Vary:Accept, Cookie

However, the request fails with Safari with the following error:

[Error] Failed to load resource: Request header field Accept-Encoding is not allowed by     Access-Control-Allow-Headers. (wines, line 0)

Here are the request and response headers:

Request
Access-Control-Request-Method   GET
User-Agent  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9) AppleWebKit/537.71 (KHTML,     like Gecko) Version/7.0 Safari/537.71
Access-Control-Request-Headers  accept-language, origin, accept-encoding

Response
Access-Control-Max-Age  86400
Access-Control-Allow-Methods    GET, POST, PUT, PATCH, DELETE, OPTIONS
Content-Type    text/html; charset=utf-8
Access-Control-Allow-Origin *
Connection  keep-alive
Access-Control-Allow-Headers    x-requested-with, content-type, accept, origin, authorization, x-csrftoken
Content-Length  0

There seems to be an issue with the encoding, but I don't know wher to go and fix that. Thanks for your time !

bpipat bpipat · Accepted Answer · 2013-12-09T17:32:28

It seems like you have missed out some parameters in the CORS_ALLOW_HEADERS settings:

Request:
Access-Control-Request-Headers  accept-language, origin, accept-encoding

Response:
Access-Control-Allow-Headers    x-requested-with, content-type, accept, origin, authorization, x-csrftoken

Try to add accept-language and accept-encoding to your headers in your settings.py

CORS_ALLOW_HEADERS = (
'x-requested-with',
'content-type',
'accept',
'origin',
'authorization',
'x-csrftoken',
'accept-encoding',
'accept-language'

)

Angular $resource calls not accepted by Access Control Allow with Safari vs. accepted with Chrome

1 Answers