Angular Js $http.get CORS issue - Working in Jquery

Question

Hi Guys I am new to angularjs, I am just converting my app from jquery to angular js. But I am facing difficulties with ajax request in angular js. My this code is working fine in jquery.

Angularjs Code:

 links.serverurl = My Another Server Address which is defined another location
 $scope.submit = function () {

 console.log(this.formData);

 $http.get(links.serverUrl).success(function (response) {  
   console.log(response);
 });

JQuery Working Code:

var url = "http://pbc.mydev786.com/";

$.get(url+"?"+data,function(response){
  $("div[data-role='page']").hide();
  $("#showbill").show();
  $(".billresult").html(response);
});

My Php Headers:

 header('Access-Control-Allow-Origin: *');
 header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PATCH, DELETE');  
 header('Access-Control-Allow-Headers: Origin, Content-Type,X-Requested-With');

AngularJs Config :

$myapp.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
        $routeProvider
                .when('/', {templateUrl: "home.html"})
                .when('/electricity', {templateUrl: "electricity.html"})
                .when('/evo', {templateUrl: "evo.html"})
                .when('/ptcl', {templateUrl: "ptcl.html"})
                .when('/suigas', {templateUrl: "suigas.html"})
                .when('/iesco', {templateUrl: "iesco.html"})
                .when('/lesco', {templateUrl: "lesco.html"})
                .when('/fesco', {templateUrl: "fesco.html"})
                .when('/kesc', {templateUrl: "kesc.html"})
                .when('/extra', {templateUrl: "extra.html"})
                .when('/myaccount', {templateUrl: "myaccount.html"});
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }]);

Requested Headers :

Accept  application/json, text/plain, */*
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Content-Length  20
Content-Type    text/plain; charset=UTF-8
Host    pbc.mydev786.com
Origin  http://localhost:8383
Referer http://localhost:8383/PakistanCheckBill/
User-Agent  Mozilla/5.0 (Windows NT 6.3; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0

Response Headers :

Connection  keep-alive
Content-Encoding    gzip
Content-Type    text/html
Date    Tue, 20 Jan 2015 11:47:43 GMT
Server  nginx/1.6.2
Transfer-Encoding   chunked

What error to do you get, if any? What is the response from the server file? — rwacarter, Jan 20 '15 at 10:56
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [http://pbc.mydev786.com/. This can be fixed by moving the resource to the same domain or enabling CORS. — Arsalan Sheikh, Jan 20 '15 at 10:58
are you sure what your server responding with needed headers ? — Narek Mamikonyan, Jan 20 '15 at 11:15
[see here](http://stackoverflow.com/questions/24341290/cors-working-fine-in-jquery-but-not-in-angularjs/30554164#30554164) — Fisherman, Nov 29 '15 at 08:23

score 2 · Answer 1 · answered Jan 20 '15 at 12:16

2

Only this worked with me not any angularjs trick helped me out

# CORS Headers 
<ifModule mod_headers.c>
Header always set Access-Control-Allow-Origin: "*"
Header always set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
Header always set Access-Control-Allow-Headers "X-Requested-With, content-type"
</ifModule>

i also tried to set these headers with php but that was not working i don't know why.

answered Jan 20 '15 at 12:16

Arsalan Sheikh

31
3

This is the only solution that worked for me. Modifying the header in my code led to the error: header already sent. btw jquery worked fine, only angular had problems. – Shlomo Oct 25 '15 at 18:30

Angular Js $http.get CORS issue - Working in Jquery

1 Answers1