cross origin request error with angularjs 1.2.6

Question

I am trying to make a simple POST request to http://battle.platform45.com/register The server is setup to respond with JSON. So from the command line:

$ curl --data '{"name": "Connor", "email": "[email protected]"}' http://battle.platform45.com/register

successfully returns

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

I try to do the same thing in 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') }) } });

with a simple view:

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

When I try to make the request I get an error:

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.

How does the POST request go through with curl but not angular? What can I do to successfully make the request with angular?

khakiout · Accepted Answer · 2014-05-08 07:41:49Z

I believe battle.platform45 is not allowing web browsers to do direct calls to their servers. By default, websites from different domains cannot access API resources from other websites.

As according to platform45, you must use Rails to create a game. So I suggest creating your own server that will call from their API server. Then use your AngularJS code to access your server.

I hope this diagram can illustrate it better:

Battle.platform45 Server -- (is called by) --> Your Server -- (is called by) --> Your HTML/Angular JS Code

yeah it's an issue with platform45's server not allowing cors from browser. Now i gotta setup a node.js server to do the dirty work for me

Ritesh Waghela · Accepted Answer · 2014-05-08 07:26:14Z

0

Try doing this:

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') }) } });

answered May 8, 2014 at 7:26

Ritesh Waghela

3,7272 gold badges23 silver badges27 bronze badges

4 Comments

Ritesh Waghela Over a year ago

which browser are you using and where have you hosted your app?

Ritesh Waghela Over a year ago

try hosting your application in a web server, such as apache http server.

Ritesh Waghela Over a year ago

If you have control over server side code you need to include "Access-Control-Allow-Origin" header in response and set it's value to your domain or * for any one to accees.

Ritesh Waghela Over a year ago

have a look at stackoverflow.com/questions/9310112/…

Collectives™ on Stack Overflow

cross origin request error with angularjs 1.2.6

2 Answers 2

1 Comment

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Linked

Related