Sails/Angular 跨域请求被阻止

Question

我是一名有用的助手，可以为您翻译文本。

我有一个Angular应用程序作为前端在localhost:9000上，后端使用Sails框架在localhost:1337上。

在Angular应用程序中，我这样查询服务器：

angular.module('webApp')
.controller('FoodCtrl', function($scope, $resource) {

    var Food = $resource('http://localhost:1337/food', {
        id: '@id'
    }, {
        update: {
            method: 'PUT'
        }   
    }); 

    $scope.food = new Food();
    $scope.foodList = Food.query();

    $scope.saveFood = function() {

        var method = $scope.food.id ? '$update' : '$save';

        $scope.food[method]({}, function() {

            $scope.food = new Food();
            $scope.foodList = Food.query();

            console.log("Saved!!");
        })
    };

行为有点奇怪。如果我从Firefox进入angular应用程序并尝试触发saveFood函数：

跨域请求被阻止：同源策略不允许读取远程资源localhost:1337/food。这可以通过将资源移动到相同的域或启用CORS来解决。

在Chrome中有点不同。有时我会得到CORS错误，有时不会，有时甚至服务器上的模型也会更新值...但页面显示“无法POST /”。

现在在我的sails应用程序中，我已经像这样启用了CORS： https://github.com/tarlepp/angular-sailsjs-boilerplate/blob/master/backend/config/cors.js#L71 编辑：当我检查请求的标头时，我看到2个POST，一个在localhost:1337/food上，其中包含Access-Control-Allow-Origin：localhost:9000，另一个在localhost:9000/#/food上，没有并且获取404

这是chrome控制台的一个例子输出：

2Navigated to http://localhost:9000/
(index):1 POST http://localhost:9000/ 404 (Not Found)
2Navigated to http://localhost:9000/
(index):1 POST http://localhost:9000/ 404 (Not Found)
2Navigated to http://localhost:9000/
food.js:33 Saved!!
(index):1 POST http://localhost:9000/ 404 (Not Found)
Navigated to http://localhost:9000/

有一次它没有发布，另一次却发布了。但我总是在页面上看到“无法发布/”的提示。 如果您想要重现它，所有的代码和步骤都在这里： http://okamuuu.hatenablog.com/entry/2014/04/10/135240

- dkx22

Answer 1

Sails.js提供了CORS的配置，位于config/cors目录下。

您可以在那里指定允许请求您数据的外部主机。

- Himmet Avsar

Answer 2

端口号含有冒号，需要进行转义

可以尝试使用单个 '\' 或双 '\\' 反斜杠进行转义

http://localhost\:1337/

或者

http://localhost\\:1337/

代码

$resource('http://localhost\:1337/food', {
        id: '@id'
    }, {
        update: {
            method: 'PUT'
        }   
    }); 

- A.B

---

错误：未能在 'XMLHttpRequest' 上执行 'send'：无法加载'http://localhost:1337:1337/food'。 - dkx22

Answer 3

尝试在config/routes.js中将此添加为您的第一个路由

'OPTIONS /*': function(req, res) {return res.send(200);},

Angular 运行预检 OPTIONS 请求以检查授权情况。您需要响应此请求。

- Meeker

---

检查您的控制台，看看是否调用并响应了OPTIONS请求。 - Meeker

有时候会接受该选项，有时候会出现404错误。 - dkx22

嗯，听起来有点奇怪。如果没有那行代码，你会预期在OPTIONS请求上出现404错误。我认为你间歇性地遇到这个问题暗示着一个更大的问题。我建议先使用Postman来排除或单独确定客户端是否是问题所在。 - Meeker

请注意，404 并不总是在选项上，大部分时间都在发布文章时出现。我之前不知道 Postman，我会去了解一下，谢谢。 - dkx22

如果Postman与您的客户浏览器的操作相同，那么我建议您发布您的路由和策略（以及任何其他自定义中间件）。 - Meeker