javascript - 客户端向服务器发出的 GET 请求出现错误 No 'Access-Control-Allow-Origin'

Question

我正在本地主机上运行我的node/express js应用程序。我正在向 Instagram 的 api 发出“GET”请求，但不断收到此错误:

XMLHttpRequest cannot load https://api.instagram.com/oauth/authorize/?client_id=******&redirect_uri=http://localhost:4000/feed&response_type=code. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:4000' is therefore not allowed access.

我在我的服务器中发出这样的请求:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Headers: x-requested-with");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

app.get('/',function(req,res){
    res.redirect(redirected to feed route);
})

app.get('/feed',function(req,response) {    
    var code = req.query.code;
    var url = "https://api.instagram.com/oauth/access_token";
    var options = {
      url: url,
      method: "POST",
      form: {
        client_id : clientId,
        client_secret : client_secret,
        grant_type: 'authorization_code',
        redirect_uri: redirect_uri,
        code: code
      },
      json: true
    }

    request(options, function(err,res,body){
        var instagram_response = body;
        response.json({access_info:instagram_response});
    })
})

通过访问我的服务器路由中的“/”获取数据工作正常。当我使用 jQuery 在客户端调用服务器“/”路由时(当 Gallery.html 加载时)，如下所示，它给了我错误。下面是在客户端加载 gallery.html 时运行的函数。

$(function(){
    $.get("/", function( instagram_reponse, access_token) {
     access_token = instagram_reponse.access_token;
    })
})

我收到此错误是因为我的 Node 服务器在本地主机上运行吗？我做错了什么？

Answer 1

您需要在 Node 上安装 CORS 包..

$ npm install cors

varexpress = require('express') , cors = 要求('cors') ，应用=express();

app.use(cors());

app.get('/products/:id', function(req, res, next){
  res.json({msg: 'This is CORS-enabled for all origins!'});
});

app.listen(80, function(){
  console.log('CORS-enabled web server listening on port 80');
});

配置选项 origin: 配置 Access-Control-Allow-Origin CORS header 。需要一个字符串(例如:“http://example.com ”)。设置为 true 以反射(reflect)请求来源，如 req.header('Origin') 所定义。设置为 false 以禁用 CORS。还可以设置为一个函数，该函数将请求来源作为第一个参数，将回调(需要签名 err [object],allow [bool])作为第二个参数。最后，它也可以是正则表达式 (/example.com$/) 或正则表达式数组和/或要匹配的字符串。

methods: 配置 Access-Control-Allow-Methods CORS header 。需要逗号分隔的字符串(例如:'GET,PUT,POST')或数组(例如:['GET', 'PUT', 'POST'])。

allowedHeaders: 配置 Access-Control-Allow-Headers CORS header 。需要一个逗号分隔的字符串(例如:'Content-Type,Authorization')或一个数组(例如:['Content-Type', 'Authorization'])。如果未指定，则默认反射(reflect)请求的 Access-Control-Request-Headers header 中指定的 header 。

exposedHeaders:配置 Access-Control-Expose-Headers CORS header 。需要逗号分隔的字符串(例如:'Content-Range,X-Content-Range')或数组(例如:['Content-Range', 'X-Content-Range'])。如果未指定，则不会公开任何自定义 header 。 凭证:配置 Access-Control-Allow-Credentials CORS header 。设置为 true 以传递 header ，否则省略。

ma​​xAge: 配置 Access-Control-Allow-Max-Age CORS header 。设置为整数以传递 header ，否则省略。

preflightContinue:将 CORS 预检响应传递给下一个处理程序。

有关更多详细信息，请参阅此 https://www.npmjs.com/package/cors