Question

我在angular.js APP和我的express.js REST之间进行通信时遇到了问题。

我正在使用yeoman 1.0 with generator-angular 0.7.1。

我尝试为我的grunt serve使用中间件配置，但我没有让它工作。

Angular App（端口：9000）：

angular.module('wboxApp')
  .controller('AdminCtrl', function ($scope, $routeParams, $http, fbRef) {
    var ref = fbRef();
    var token = $routeParams.token;

    $http.post('http://127.0.0.1:3000/box/token/get', {token: token}).success(function (data) {
        console.log(data);
      }
    });
  });

Express API（端口：3000）：

app.post('/box/token/get', function (req, res) {
  res.header('Access-Control-Allow-Origin', req.headers.origin || "*");
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'content-Type,x-requested-with');

  var token = req.body.token;
  var tokenRef = ref.child('tokens').child(token);  

  tokenRef.once('value', function (data) {
    var fullToken = data.val();

    fullToken = fullToken + '.' + token;

    if (data.val()) {
      res.json({fullToken: fullToken});
    } else {
      res.json({fullToken: null});
    }
  });
});

浏览器错误：

OPTIONS http://127.0.0.1:3000/box/token/get No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:9000' is therefore not allowed access.
XMLHttpRequest cannot load http://127.0.0.1:3000/box/token/get. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:9000' is therefore not allowed access.

Answer 1

似乎角度页面由运行在127.0.0.1:9000上的服务器提供服务。交叉源策略不允许来自其他域的Ajax请求。为了解决这个问题，您可以添加明确的中间件，为跨源请求添加标头 -

app.all('/*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type,X-Requested-With');
    next();
});

Answer 2

哦亲爱的，不要执行跨源请求！
有一种更好的方法：grunt-connect-proxy - 向9000端口发出请求，让你的前端服务器将它们转发到实际的后端。

以下是在不到3分钟内配置它的方法：https://stackoverflow.com/a/21655532/1432478

无法将angular.js中的POST发送到express.js

2 个答案: