Whenever I do webapp and I have a CORS problem, I start making coffee. After screwing it in for some time, I manage to get it to work, but this time it is not, and I need help.
Here is the client side code:
$http({method: 'GET', url: 'http://localhost:3000/api/symbol/junk', headers:{ 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type, X-Requested-With', 'X-Random-Shit':'123123123' }}) .success(function(d){ console.log( "yay" ); }) .error(function(d){ console.log( "nope" ); });
The server side is a regular node.js with an express application. I have an extension called cors and it is used with an expression as follows:
var app = express(); app.configure(function(){ app.use(express.bodyParser()); app.use(app.router); app.use(cors({origin:"*"})); }); app.listen(3000); app.get('/', function(req, res){ res.end("ok"); });
If i do
curl -v -H "Origin: https://github.com" http:
He returns with:
* Adding handle: conn: 0x7ff991800000 * Adding handle: send: 0 * Adding handle: recv: 0 * Curl_addHandleToPipeline: length: 1 * - Conn 0 (0x7ff991800000) send_pipe: 1, recv_pipe: 0 * About to connect() to localhost port 3000 (#0) * Trying ::1... * Trying 127.0.0.1... * Connected to localhost (127.0.0.1) port 3000 (#0) > GET / HTTP/1.1 > User-Agent: curl/7.30.0 > Host: localhost:3000 > Accept: */* > Origin: https://github.com > < HTTP/1.1 200 OK < X-Powered-By: Express < Date: Tue, 24 Dec 2013 03:23:40 GMT < Connection: keep-alive < Transfer-Encoding: chunked < * Connection #0 to host localhost left intact ok
If I run the code on the client side, this will result in an error:
OPTIONS http://localhost:3000/api/symbol/junk No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. angular.js:7889 XMLHttpRequest cannot load http://localhost:3000/api/symbol/junk. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. localhost/:1 nope
Checking Chrome Headers:
Request URL:http://localhost:3000/api/symbol/junk Request Method:OPTIONS Status Code:200 OK Request Headersview source Accept:*/* Accept-Encoding:gzip,deflate,sdch Accept-Language:en-US,en;q=0.8,es;q=0.6,pt;q=0.4 Access-Control-Request-Headers:access-control-allow-origin, accept, access-control-allow-methods, access-control-allow-headers, x-random-shit Access-Control-Request-Method:GET Cache-Control:max-age=0 Connection:keep-alive Host:localhost:3000 Origin:http://localhost:8000 Referer:http://localhost:8000/ 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 Allow:GET Connection:keep-alive Content-Length:3 Content-Type:text/html; charset=utf-8 Date:Tue, 24 Dec 2013 03:27:45 GMT X-Powered-By:Express
Checking the request headers, I see that my X-Random-Shit test line is present in the "Access-Control-Request-Headers" header, but its value is missing. Also, in my head, I expected to see one line for each of the headers that I customize, not blob.
UPDATES ---
I changed my interface to jQuery instead of Angular and made my backend as follows:
var app = express(); app.configure(function(){ app.use(express.bodyParser()); app.use(app.router); }); app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header('Access-Control-Allow-Methods', 'OPTIONS,GET,POST,PUT,DELETE'); res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With"); if ('OPTIONS' == req.method){ return res.send(200); } next(); }); app.get('/', function(req, res){ res.end("ok"); });
Now it works with GET, but not with anything else (PUT, POST ..).
I will see if any of you find a solution. At the same time, throwing the RESTful concept out of the window and doing everything with GET.