I am struggling on an issue with cors between angular js and sails.js (node.js framework)
I try to fix the error: XMLHttpRequest cannot load http://localhost:1337/en/auth/forgetpass/email. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers.
When I do not activate my interceptor it works well. I do not have this error. When I activate it, I have the error.
In my .config I setup the code below:
//Enable cross domain calls
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = '*';
$httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
$httpProvider.defaults.headers.common['Access-Control-Allow-Methods'] = 'GET,POST,PUT,HEAD,DELETE,OPTIONS';
$httpProvider.interceptors.push('TokenInterceptor');
Then in my interceptor I setup the code below:
return {
request: function (config) {
var id = Session.getprop('id');
if(id) {
config.headers = config.headers || {};
config.headers.Authorization = 'Bearer ' + id;
}
return config;
}, ...
Finally, the result from the chrome network tab is:
Remote Address:127.0.0.1:1337
Request URL:http://localhost:1337/en/auth/forgetpass/email
Request Method:OPTIONS
Status Code:200 OK
Response Headers
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:*
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS, HEAD
Access-Control-Allow-Origin:*
Allow:GET,POST,PUT,HEAD,DELETE,TRACE,COPY,LOCK,MKCOL,MOVE,PROPFIND,PROPPATCH,UNLOCK,REPORT,MKACTIVITY,CHECKOUT,MERGE,M-SEARCH,NOTIFY,SUBSCRIBE,UNSUBSCRIBE,PATCH
Connection:keep-alive
Content-Length:154
Content-Type:text/html; charset=utf-8
Date:Sun, 12 Apr 2015 23:51:14 GMT
Set-Cookie:sails.sid=s%3A-bZxQgFntbDqTtaFyWDFFgFr.szR0F68VfIBjVW9kyans9d6v5fz7RMtalQCoMFdbH%2Fg; Path=/; HttpOnly
X-Powered-By:Sails <sailsjs.org>
Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:access-control-allow-origin, accept, access-control-allow-headers, access-control-allow-methods
Access-Control-Request-Method:POST
Connection:keep-alive
Host:localhost:1337
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36
And I still get the same error. An idea?
Many thanks!
Ok I finally found the issue.
I compared the response and request headers with interceptor and with it.
I change my code as below and it works.
In app.js of angularjs
I commented all the headers part.
//Enable cross domain calls
/* $httpProvider.defaults.useXDomain = true;
//Remove the header used to identify ajax call that would prevent CORS from working
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = 'origin, content-type, accept';
$httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
$httpProvider.defaults.headers.common['Access-Control-Allow-Methods'] = 'GET,POST,PUT,HEAD,DELETE,OPTIONS';*/
$httpProvider.interceptors.push('TokenInterceptor');
And in my sails.js cors setup config I commented methods and headers. And it works well.
module.exports.cors = {
/***************************************************************************
* *
* Allow CORS on all routes by default? If not, you must enable CORS on a *
* per-route basis by either adding a "cors" configuration object to the *
* route config, or setting "cors:true" in the route config to use the *
* default settings below. *
* *
***************************************************************************/
allRoutes: true,
/***************************************************************************
* *
* Which domains which are allowed CORS access? This can be a *
* comma-delimited list of hosts (beginning with http:// or https://) or *
* "*" to allow all domains CORS access. *
* *
***************************************************************************/
origin: '*',
/***************************************************************************
* *
* Allow cookies to be shared for CORS requests? *
* *
***************************************************************************/
credentials: true
/***************************************************************************
* *
* Which methods should be allowed for CORS requests? This is only used in *
* response to preflight requests (see article linked above for more info) *
* *
***************************************************************************/
// methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
/***************************************************************************
* *
* Which headers should be allowed for CORS requests? This is only used in *
* response to preflight requests. *
* *
***************************************************************************/
// headers: 'origin, content-type, accept'
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With