$http POST request with AngularJS post's my data to server but fails with error message “not allowed by Access-Control-Allow-Origin”

[Arif Nadeem]

I am literally scouring the internet looking for ways to find the right approach to post my data to server using AngularJS.

When I do a $http POST request with Angular JS it post's my data to server but fails with error message "Origin http://localhost:8000 is not allowed by Access-Control-Allow-Origin", it doesn't matter if I try it with "file:///", the result is still the same.

I tried all remedies mentioned on internet including

 app.config(['$httpProvider', function ($httpProvider) {
            $httpProvider.defaults.useXDomain = true;
            delete $httpProvider.defaults.headers.common['X-Requested-With'];
        }]);

and followed most of the instructions in this article but they do not work for me.

I also set Access-Control-Allow-Origin: * and access-control-allow-headers: Origin, X-Requested-With, Content-Type, Accept, access_token, Origin, X-Requested-With, Content-Type, Accept, access_token on server side methods but I am still getting that same error, the following is my code

var URL = "https://myURL";
        var app = angular.module('myApp', []);
        app.config(['$httpProvider', function ($httpProvider) {
            $httpProvider.defaults.useXDomain = true;
            delete $httpProvider.defaults.headers.common['X-Requested-With'];
        }]);
        app.controller('UserController', function($scope, $http){
            $scope.user = {};
            $scope.createUser = function () {
                $http({
                    url: URL,
                    data: $scope.user,
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "access_token": "sometoken"
                    }
                }).success(function(response){
                            $scope.response = response;
                            alert('ok');
                        }).error(function(error){
                            $scope.error = error;
                            alert('error');
                        });
            }
        });

I have no idea what I am doing wrong here, please help me out.

EDIT:

The following is my preflight headers

Request URL:https://myURL
Request Method:OPTIONS
Status Code:200 OK
Request Headersview source
:host:someapp.appspot.com
:method:OPTIONS
:path:somepath
:scheme:https
:version:HTTP/1.1
accept:*/*
accept-encoding:gzip,deflate,sdch
accept-language:en-US,en;q=0.8
access-control-request-headers:accept, origin, access_token, content-type
access-control-request-method:POST
dnt:1
origin:http://localhost:8000
referer:http://localhost:8000/samplepost.html
user-agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36
Response Headersview source
access-control-allow-headers:Origin, X-Requested-With, Content-Type, Accept, access_token
access-control-allow-origin:*
alternate-protocol:443:quic
content-length:0
content-type:text/html
date:Mon, 16 Sep 2013 17:58:03 GMT
server:Google Frontend
status:200 OK
version:HTTP/1.1

And the following is my POST headers:

Request URL:someURL
Request Headersview source
Accept:application/json, text/plain, */*
access_token:dsfdsfds
Content-Type:application/json
Origin:http://localhost:8000
Referer:http://localhost:8000/samplepost.html
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36
Request Payloadview source
{name:adasds, email:sd...@gmail.com, phone:325325325, comments:fddsfsdfsd}
comments: "fddsfsdfsd"
email: "sd...@gmail.com"
name: "adasds"
phone: "325325325"

Firefox request headers and response headers:

Response Headersview
Access-Control-Allow-Orig...    *, *
Alternate-Protocol  443:quic
Cache-Control   private
Content-Encoding    gzip
Content-Length  136
Content-Type    application/json
Date    Mon, 16 Sep 2013 18:30:17 GMT
Server  Google Frontend
Vary    Accept-Encoding
X-Firefox-Spdy  3
access-control-allow-head...    Origin, X-Requested-With, Content-Type, Accept, access_token, Origin, X-Requested-With, Content-Type, Accept, access_token
Request Headersview source
Accept  application/json, text/plain, */*
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Cache-Control   no-cache
Connection  keep-alive
Content-Length  100
Content-Type    application/json; charset=UTF-8
Host    someapp.appspot.com
Origin  null
Pragma  no-cache
User-Agent  Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0
access_token    dsfdsfds

[Mark Volkmann]

Are you serving your HTML, CSS and JavaScript files from a server on localhost that is listening on port 8000? I have been using Grunt with the grunt-contrib-connect plugin to do this. It's very easy to set up once you have Grunt installed.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

--
R. Mark Volkmann
Object Computing, Inc.