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}%

我尝试用角度做同样的事情：

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成功发出请求？

Answer 1

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

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

我希望这个图表可以更好地说明它：

Battle.platform45服务器 - （被称为） - ＆gt;您的服务器 - （被称为） - ＆gt;您的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')
        })
    }
});

angularjs 1.2.6的交叉原始请求错误

2 个答案: