Question

我有一个独立的ExpressJS API，我已经构建了应该能够为移动应用程序和Web应用程序提供服务。我正在尝试使用我构建的简单AngularJS客户端应用程序来测试API。当我在本地托管它时，API服务运行正常。

尝试对外部服务器上托管的API进行GET调用时，我收到了跨域请求错误。我正在使用Chrome v39

编辑：我的错误结果是对我的heroku API的错误网址引用。请参阅下面的答案。

XMLHttpRequest cannot load http://myservice.heroku.com/some-api-endpoint?request-parameter=value. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin http://localhost:5001 is therefore not allowed access.

阅读并扫描了大量文章后，我尝试了以下内容：

API上的CORS代码

已添加到app.js

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Max-Age", "1728000");
  res.header("Access-Control-Expose-Headers", "Cache-Control, Pragma, Origin, X-Requested-With, Content-Type, Accept");
  if (req.method === 'OPTIONS') {
    res.statusCode = 204;
    return res.end();
  } else {
    return next();
  }
});

API上的CORS代码（尝试2）

使用CORS node_module代替上述内容，会产生相同的错误

已添加到Package.json

"cors" : "~2.5.2"

已添加到app.js

var cors = require('cors');
app.use(cors());

客户代码（尝试1）

$http({
  url: 'http://myservice.heroku.com/some-api-endpoint?request-parameter=value',
  method: 'GET',
  headers : {
    "Origin" : "myclient.heroku.com",
    "Access-Control-Expose-Headers": "X-Requested-With",
    "Access-Control-Request-Method" : "GET",
    "Access-Control-Request-Headers" : "Origin, X-Requested-With, Content-Type, Accept"
  }
})

chrome dev控制台中的错误：

Refused to set unsafe header "Origin" angular.js:9625
Refused to set unsafe header "Access-Control-Request-Method" angular.js:9625 
Refused to set unsafe header "Access-Control-Request-Headers" angular.js:9625
XMLHttpRequest cannot load http://myservice.heroku.com/some-api-endpoint?request-parameter=value, which is disallowed for cross-origin requests that require preflight. (index):1

客户代码（尝试2）

thePath = 'http://myservice.heroku.com/some-api-endpoint?request-parameter=value'
  +'&callback=JSON_CALLBACK';
$http.jsonp(thePath)
.success(function(data){
  console.log(data);
});

Chrome开发者控制台收到的错误：

Uncaught SyntaxError: Unexpected token : endpoint?request-parameter=value&callback=angular.callbacks_0:1

这让我困扰了两天。任何帮助表示赞赏！

Answer 1

该错误原来是对Heroku上托管的应用程序的引用。我试图向myapp.heroku.com而不是myapp.herokuapp.com提出请求。这是一个导致错误的细微差别。

使用cURL或在myapp.heroku.com的浏览器地址栏中输入请求会将您的请求重定向到myapp.herokuapp.com并成功完成请求。但是，由Angular.js $http()函数生成会导致跨域错误。

最简单的问题似乎造成了最大的困惑。

Answer 2

你正在为CORS采取复杂的路线。使用nodejs CORS中间件做你的东西.... 添加，

"cors": "^2.5.1",

到package.json＆amp;中的依赖项在app模块中，

var cors = require('cors');
//add cors to do the cross site requests
app.use(cors());

AngularJS跨域请求分离Heroku上托管的ExpressJS App

API上的CORS代码

API上的CORS代码（尝试2）

客户代码（尝试1）

客户代码（尝试2）

2 个答案: