Search code examples
javascriptangularjshttpsgetcors

Receiving CORS Errors when trying to send an Angular GET Request

Here is my end point:

http://d.biossusa.com/api/distributor?key=#####

I get this response: 

{"152":{"user":{"id":198,"firstname":null,"lastname":null,"username":"Lucerna-chem","email":"[email protected]","type":"Distributor","password_temp":null,"code":"omrotFVDQS3T75wTFUS67W0kUnXUpePrvaP5Pha9QevHjB0olSjPIxhmmJuZ","active":1,"logo_path":"lucerna-chem.jpg","created_at":"2014-10-15","updated_at":"2017-01-30","email_again":"","notification":"","send_invitation":"1","last_logged_in":null,"last_logged_out":null,"logged_in_count":"24","is_online":"0","group":"","cd_count":"10","mmd_count":"11"},"logo":"\/9j\/4AAQSkZJRgABAQEAYABgAAD\/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz\/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz\/wAARCABBARUDASIAAhEBAxEB\/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL\/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKzt .........

I am trying to send an Angular GET request to that URL. This is what I have: 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <p>Today's welcome message is:</p>
  <h1>{{myData}}</h1>

</div>

<script>

  var app = angular.module('myApp', []);

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

  ]);

  app.controller('myCtrl', function($scope, $http) {
    $http.get("http://d.biossusa.com/api/distributor?key=#####")
    .then(function(response) {
        $scope.myWelcome = response.data;
    });
});


</script>

However, I keep on receiving CORS errors in the console.

enter image description here

How do I prevent CORS errors? Is there anything that I can do get my data to display?

Solution

  • Why do I get error only when I used angular

    You will get that error any time you make a Web application that has any client-side JavaScript that sends a cross-origin request to http://d.biossusa.com/api/distributor?key=***** using XMLHttpRequest or the Fetch API or any library that uses those (for example, jQuery).

    So it’s not a problem specific to angular.

    As far as why you get this error, it’s because browsers restrict your Web apps from making cross-origin requests from JavaScript—unless the site the requests are sent to opt in to allowing it.

    And the way sites opt in to allowing cross-origin requests is by sending a response that includes an Access-Control-Allow-Origin header that indicates which origins it allows requests from.

    So a site that sends an Access-Control-Allow-Origin: * response header is telling browsers that it allows XHR/Fetch cross-origin requests coming from any origin.

    And browsers are the only tools that check for the Access-Control-Allow-Origin header. (And the only tools that send the Origin request header.)

    Consider if you use curl or something to request a document from a server: The server doesn’t check the Origin header and refuse to send the document if the requesting origin doesn’t match the Access-Control-Allow-Origin header. The server sends the response regardless.

    And as far as clients go, curl and non-browser tools don’t have the concept of an origin to begin with and so don’t usually send any Origin header to begin with. (You can make curl send one—with any value you want—but it’s pointless because servers don’t care what the value is.)

    And curl, etc., don’t check the value of the Access-Control-Allow-Origin response header the server sends, and refuse to get a document if the request’s Origin header doesn’t match the Access-Control-Allow-Origin header in the server response. They just get the document.

    But browsers are different. Browser engines are really the only clients that have the notion of an origin to begin with, and that know the actual origin a Web application’s JavaScript is running in.

    And unlike curl, etc., browsers will not let your script get a document if the XHR or fetch() call requesting it is from an origin not allowed in the server’s Access-Control-Allow-Origin header.