Question

我正在构建一个与GitHub API集成的React / Redux应用程序。此应用需要用户使用GitHub的OAuth登录。我尝试使用npm包isomorphic-fetch来执行请求，但似乎无法使其工作。

这是请求：

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');
      });
  };
};

这是我的路由器

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

这是我一直得到的错误

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.

Answer 1

看起来这是一个安全选项，可以防止网页向不同的域发出AJAX请求。我遇到了同样的问题，下面的步骤修复了它。

首先使用＆＃39;软件包管理器＆＃39;在WebService应用程序中启用CORS控制台
```
PM>Install-Package Microsoft.AspNet.WebApi.Cors  
```
在App_Start / WebApiConfig.cs文件里面的方法Register（HttpConfiguration config）中添加代码
```
config.EnableCors();
```

最后将[EnableCors]属性添加到类

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

如何在我的localhost上使用fetch创建CORS请求？

1 个答案: