0

I have a loopback API server configured with Passport running on port 3000. My UI is composed by react JS which is being served from port 3080. I want to implement authentication with Google. For this, from my react application, I am making a call to localhost:3000/auth/google But the call is not getting redirected to google because of the CORS error :

Fetch API cannot load http://localhost:3000/auth/google. Redirect from 'http://localhost:3000/auth/google' to 'https://accounts.google.com/o/oauth2/auth?response_type=code&redirect_uri=h…d=584602753475-1kk345gd8trcn31pbg1v2gncajhpakk8.apps.googleusercontent.com' has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect.

When I hit http://localhost:3000/auth/google url from a fresh browser tab, everything is working fine.

Can anyone tell where should I enable the cors ?

Edit

I could see that, the browser is making an options request to localhost:3000/auth/google

This is what I got when I made an options request with curl : HTTP/1.1 204 No Content X-Powered-By: Express Vary: Origin Access-Control-Allow-Credentials: true Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE Access-Control-Max-Age: 86400 Date: Mon, 20 Feb 2017 14:05:53 GMT Connection: keep-alive

Shalin LK
  • 190
  • 5
  • 14

1 Answers1

0

I do not know how to enable CORS in Strongloop or ReactJS, but to enable it you need two things:

1. The right configuration of the JS request like so:

var params = {
  …
  mode: 'cors',
  credentials: 'include' //<- that gave me some headache a while ago,
                         //but is probably not necessary in your case. 
  …
}

fetch(new Request(<url>, params).then(res => …);
  1. The right server configuration. A cors request will first call the server with a preflight request, which should tell the browser if it may access this resource, including all headers. This request uses the http OPTIONS method/verb so your server needs to respond on that correctly. If it does, the Browser will perform the actual request you want to do.

I hope that helps.

philipp
  • 15,947
  • 15
  • 61
  • 106
  • thanks for the reply. I have this part in my JS fetch request. And the browser makes an Options request to `http://localhost:3000/auth/google` . This is where things get blocked. – Shalin LK Feb 20 '17 at 13:13
  • did you test the options request? http://stackoverflow.com/questions/14481850/how-to-send-a-http-options-request-from-the-command-line – philipp Feb 20 '17 at 13:29
  • I tried an Options request. Response is : `HTTP/1.1 204 No Content X-Powered-By: Express Vary: Origin Access-Control-Allow-Credentials: true Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE Access-Control-Max-Age: 86400 Date: Mon, 20 Feb 2017 14:05:53 GMT Connection: keep-alive` – Shalin LK Feb 20 '17 at 14:24
  • I guess there is a header for the allowed `content-type` missing. Are trying to post/receive json? – philipp Feb 20 '17 at 14:51
  • that enpoint returns an html page with content type text/html; – Shalin LK Feb 20 '17 at 16:40
  • Thanks for the input. I think I should add origin in my loopback server(3000). But I am not sure how to. – Shalin LK Feb 21 '17 at 05:12