Problems with express and CORS

Question

I am running a nodejs script with express. I have read the documentation but I can't make CROS requests still. I am running a web server to show how it is not working: http://a56f1bae.ngrok.io/

I really do not know why it is not working, it is almost exactly as it is in the documentation.

Here is my script if that helps:

var express = require('express');
var app = express();

app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', "*");
    res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
})

app.get('*', function (req, res) {
  res.send(html);
});

app.listen(3000, function () {
  console.log('Server running on port 3000');
});



var html = `
<html>
<head>
<script>
var url = 'https://suggestqueries.google.com/complete/search?output=firefox&hl=en&q=test';
var request = new XMLHttpRequest();
  if('withCredentials' in request) {
     // Firefox 3.5 and Safari 4
     try{
       request.open('GET', url, false);
       request.send();
       document.write('It is doing fine!');
     } catch (err){
       document.write(err)
     }
  } else if (XDomainRequest) {
     // IE8
     try{
       var xdr = new XDomainRequest();
       xdr.open('get', url);
       xdr.send();
       document.write('It is doing fine!');
     } catch (err){
       document.write(err)
     }
     // handle XDR responses -- not shown here :-)
  }
</script>
</head>
</html>
`;

Thank you so much and sorry if my question is obviously.

localhost:3000 is not running, can't check the error. or please post the network panel log — Aritra Chakraborty, Aug 05 '18 at 13:17

Aritra Chakraborty · Accepted Answer · 2018-08-05T14:00:17.510

I think you have a conceptual problem.

You have to set cors header to the SERVER not the CLIENT.
You want to access suggestqueries.google.com from localhost:3000. That means in this case the server is Server is google.com or I guess google API. That means you need to set the cors there, in the google api.

If let's say you had an app running in localhost:someport and access localhost:3000 which may serve as api service, then you needed to add cors to your Express app. Because then it would have been your SERVER.

Check this out: https://developers.google.com/api-client-library/javascript/features/cors

Note: For development purpose you can disable same origin policy in chrome. refer here on how to do that: Disable same origin policy in Chrome

Edit: A workaround
As there are very little docs for google suggest, You can use jsonp to overcome the cors issue. check: JavaScript XMLHttpRequest using JsonP

Instead using XMLHttpRequest try using the jsonp function created by @paul

function jsonp(url, callback) {
    var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
    window[callbackName] = function(data) {
        delete window[callbackName];
        document.body.removeChild(script);
        callback(data);
    };

    var script = document.createElement('script');
    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
    document.body.appendChild(script);
}

jsonp('http://www.helloword.com', function(data) {
   alert(data);
});

I think there is nothing in Google API about Google suggestions. — Lucas, Aug 05 '18 at 13:44
Your workaround is perfect! Thank you so much for helping me! — Lucas, Aug 05 '18 at 14:14

Problems with express and CORS

1 Answers1

Linked