angularjs 1.2.6 的跨域请求错误

Question

我正在尝试向http://battle.platform45.com/register 发出一个简单的 POST 请求，服务器设置为使用 JSON 响应。所以从命令行：

$ curl --data '{"name": "Connor", "email": "connorleech@gmail.com"}' http://battle.platform45.com/register

成功返回

{"id":"3118","x":1,"y":9}%

我尝试在 Angular 中做同样的事情：

app.controller('BattleshipCtrl', function ($scope, $http) {
    $scope.game = {}
    $scope.newGame = function(name, email){
        $http.post("http://battle.platform45.com/register", { 
            name: name,
            email: email
        }).success(function(data, status, headers, config){
           console.log('Success')
        })
    }
});

简单的观点：

<input type='text' ng-model='game.name'>
<input type='text' ng-model='game.email'>
<div class='btn btn-success' ng-click='newGame(game.name, game.email)'>New game</div>

当我尝试发出请求时出现错误：

OPTIONS http://battle.platform45.com/register 404 (Not Found) angular.js:7962
XMLHttpRequest cannot load http://battle.platform45.com/register. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:9000' is therefore not allowed access. 

POST 请求如何通过 curl 而不是 Angular 进行？我该怎么做才能成功地使用 Angular 发出请求？

Answer 1

我相信battle.platform45不允许网络浏览器直接调用他们的服务器。默认情况下，不同域的网站无法访问其他网站的API资源。

根据platform45，您必须使用Rails 来创建游戏。所以我建议创建你自己的服务器，从他们的 API 服务器调用。然后使用您的 AngularJS 代码访问您的服务器。

希望这张图能更好地说明：

Battle.platform45 服务器 -- (被调用) --> 你的服务器 -- (被调用) --> 你的 HTML/Angular JS 代码

Answer 2

尝试这样做：

var config = {headers: {
            'Access-Control-Allow-Origin': '*'
            }
    };

app.controller('BattleshipCtrl', function ($scope, $http) {
    $scope.game = {}
    $scope.newGame = function(name, email){
        $http.post("http://battle.platform45.com/register", config, { 
            name: name,
            email: email
        }).success(function(data, status, headers, config){
           console.log('Success')
        })
    }
});