How do I make a CORS request with fetch on my localhost?

Question

I'm building a React/Redux app that integrates with GitHub's API. This app will require users to sign-in using GitHub's OAuth. I'm trying to use the npm package isomorphic-fetch to do the request but cannot seem to get it to work.

Here is the Request:

require('isomorphic-fetch');
var types = require(__dirname + '/../constants/action_types');

module.exports.handleAuthClick = function() {
  return function(dispatch, getState) {
    var state = getState();

    return fetch('http://localhost:3000/auth')
    .then(function(res) {
        if (res.status <= 200 && res.status > 300) {
          // set cookie
          // return username and token

          return {
            type: HANDLE_AUTH_CLICK,
            data: res.json()
          };
        }
        throw 'request failed';
      })
      .then(function(jsonRes) {
        dispatch(receiveAssignments(jsonRes));
      })
      .catch(function(err) {
        console.log('unable to fetch assignments');
      });
  };
};

Here is my Router

authRouter.get('/', function(req, res) {
  res.redirect('https://github.com/login/oauth/authorize/?client_id=' + clientId);
});

And here is the Error I keep getting

Fetch API cannot load https://github.com/login/oauth/authorize/?client_id=?myclientID
No 'Access-Control-Allow-Origin' header is present on the requested resource.     
Origin 'http://localhost:3000' is therefore not allowed access. If an opaque 
response serves your needs, set the request's mode to 'no-cors' to fetch the 
resource with CORS disabled.

You're hitting github.com; you maybe want api.github.com? Suggest you take a look at their API docs. — brandonscript, Dec 19 '15 at 05:53
I appricated your response, however if you look at the API documentation for Github OAuth you are supposed redirect to github.com. https://developer.github.com/v3/oauth/ — timcmiller, Dec 19 '15 at 05:57
Hrm... Indeed. I suspect it's because it expects a web browser UI to load the page instead of an API call, hence the CORS warning. Do you have the ability to present a modal web view? If not, maybe GH supports implicit grant? — brandonscript, Dec 19 '15 at 05:59
The don't support implicit grant according the the docs. I'll look into a modal web view. I've never done anything like that so I was hesitant. But it might be the way I have to go. — timcmiller, Dec 19 '15 at 06:07
Almost all popular OAuth providers have moved to that model because of security, so if you get it working, it'll be a great learning experience — brandonscript, Dec 19 '15 at 06:08

score 1 · Answer 1 · edited May 10 '16 at 02:49

Looks like this is a security option which prevents a web page from making AJAX requests to different domain. I faced the same problem, and below steps fixed it.

Firstly enable CORS in the WebService app using 'package Manager' console
```
PM>Install-Package Microsoft.AspNet.WebApi.Cors  
```
Inside App_Start/WebApiConfig.cs file inside the method Register (HttpConfiguration config) add code
```
config.EnableCors();
```

Finally add the [EnableCors] attribute to the class

namespace <MyProject.Controllers>
{
    [EnableCors(origins: "http://example.com", headers: "*", methods: "*")]
    public class MyController : ApiController
    {
       //some code

How do I make a CORS request with fetch on my localhost?

1 Answers1

Linked