1

I have my application running locally on my computer and it is trying to connect to my remote nodeJS/Express server. I have set the headers in my remote server.

Main question: How do I allow my remote server to accept requests coming from my localhost with parameters? People have told me that my request will not work because the requested URL and the server URL do not share the same domain. The request is coming from my localhost and it is trying to access my remote node/express server. This transaction works when I remove the params in the request but does NOT work when I have the params.

This is how I set headers in my remote server to accept all requests:

app.use(function (req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:9000");
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

  if(res.headersSent) {
    console.log("Headers sent");
  }
  else {
    console.log("Headers not sent");
  }
  next();
});

Also, the res.headersSent keeps evaluating to false even though I can see the headers set in my Google network tab. Why is this value returning false?

This is how I am making my GET request to my server from my localhost:

var req = $http({
        url: 'https://20161128t135355-dot-jarvis-hd-live-2.appspot-preview.com/read-message',
        method: 'GET',
        cache: false,
        params: {last_updated: last_updated_time}
    });

This post was not helpful How to enable cross-origin resource sharing (CORS) in the express.js framework on node.js

I think the params is causing the error, because it works fine when I take it out. I get this error:

XMLHttpRequest cannot load https://20161128t135355-dot-jarvis-hd-live-2.appspot-preview.com/read-message?last_updated=0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 502.

All the solutions say to add/set the header and as you can see I have done that but my application still gives me the same error when I include params in the request. What should I do differently?

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Neha Sohail
  • 239
  • 3
  • 19
  • Are you sure the headers are being received? Do you see preflight requests in the browser? What does the traffic look like from the client side? – ssube Nov 28 '16 at 16:48
  • @ssube How do I check if the headers are being received? – Neha Sohail Nov 28 '16 at 16:48
  • What is an error or response? – Wasiq Muhammad Nov 28 '16 at 16:48
  • 2
    **The response had HTTP status code 502** — So you have an internal server error. That explains why the CORS headers are not being set correctly. You need to debug your server side code. – Quentin Nov 28 '16 at 16:49
  • 1
    Look in the browser's debugger. In Chrome, the network tab will show you requests with their headers. – ssube Nov 28 '16 at 16:49
  • @ssube I see this in my network for request headers: `Accept:*/*` – Neha Sohail Nov 28 '16 at 16:56
  • @Quentin I do not get an internal error. Sorry I posted the wrong link. This is the correct url I am making the request to. https://20161128t123028-dot-jarvis-hd-live-2.appspot-preview.com/ – Neha Sohail Nov 28 '16 at 17:37
  • _"How do I allow my remote server to accept requests coming from my localhost?"_ - you don't, because that is not how CORS works. Your server accepts _any_ request, it doesn't matter where it comes from. You need to allow _the client_ to make the request across domain boundaries; and that is done by having the server send the appropriate response headers. – CBroe Nov 28 '16 at 17:41
  • @CBroe By doing this `res.header("Access-Control-Allow-Origin", "*");` am I not sending the appropriate response headers? – Neha Sohail Nov 28 '16 at 17:48
  • Yes, but that does not mean that you are "allowing your server to accept requests", as you put it. – CBroe Nov 28 '16 at 17:53
  • @CBroe Sorry I am not understanding you. I am allowing my server to accept ALL requests by doing `res.header("Access-Control-Allow-Origin", "*");` Looks like `res.headersSent` is false, so my headers are not being sent. How can I debug this? – Neha Sohail Nov 28 '16 at 17:56
  • No, you are _allowing the client_ to make the request. That is how CORS works. // Go check the initial request in your browser's network panel - what is the status code? – CBroe Nov 28 '16 at 18:15
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/129264/discussion-between-user5694093-and-cbroe). – Neha Sohail Nov 28 '16 at 18:19
  • @user5694093 — If you don't get an internal error, then edit your question to show us the error you are actually getting. Currently you are still saying that the error message is: *XMLHttpRequest cannot load https://20161128t123028-dot-jarvis-hd-live-2.appspot-preview.com/read-message?last_updated=0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. **The response had HTTP status code 502**.* – Quentin Nov 28 '16 at 18:47
  • @Quentin I have updated my question. There is no internal error as you can see in my remote server url: https://20161128t135355-dot-jarvis-hd-live-2.appspot-preview.com/read-message The issue is when I add params in my request. I don't get an error if I remove the params. – Neha Sohail Nov 28 '16 at 19:05
  • 1
    @user5694093 — So that means your problem is that your server side code throws an error when you add params to the request. You need to debug that. The CORS stuff is almost certainly irrelevant. – Quentin Nov 28 '16 at 19:10
  • @user5694093 thank you for your help! I was able to answer my question (: – Neha Sohail Nov 28 '16 at 19:37

1 Answers1

0

So that means your problem is that your server side code throws an error when you add params to the request. You need to debug that. The CORS stuff is almost certainly irrelevant.

This issue is not a CORS issue, it has something to do with my params request. To fix this, I had to configure body-parser like so:

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

This helps when sending JSON data to the client from the server or vice versa. You can find more information here: http://junerockwell.com/difference-parameters-query-strings-express-js/

Neha Sohail
  • 239
  • 3
  • 19