Receiving CORS Errors when trying to send an Angular GET Request

Question

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":"oliveri@lucerna-chem.ch","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.

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

It’s not clear how this if different from the question you asked at http://stackoverflow.com/questions/42032996/angularjs-http-cors-get-nginx. I that other question you describe how you tried to configure your nginx server to send the right headers. But if you did that and the headers are still not being sent as expected, then it must be some problem in your nginx config. — sideshowbarker, Feb 05 '17 at 04:07
What do you usng in your backend.Generally the error comes due to backend in which your browser doesn't support localhost request.solution for this is you need to include some of the header file.Your backend is on PHP or Laravel or what?? — Mohammed, Feb 05 '17 at 04:08
@sideshowbarker : I'm just showing to u that I can get the data fine when I visit it directly. How comes I don't get the cors error when I visit it directly? — code-8, Feb 05 '17 at 04:12
http://stackoverflow.com/questions/41936492/cross-origin-request/41936598#41936598. Checkout this link — Mohammed, Feb 05 '17 at 04:14

score 2 · Accepted Answer · edited May 10 '17 at 16:07

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.

Thanks for your details answer. I have a deep understanding in this CORS now. So where do I set the configuration in my server to accept cors request ? Is it as part of a web server configs like Nginx or Apache ? — code-8, Feb 05 '17 at 14:50

score 1 · Answer 2 · answered Feb 05 '17 at 04:15

1

you need to add this:

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

In laravel, included this in Route file.

answered Feb 05 '17 at 04:15

Mohammed

648
2
12
32

You sure route file , not Nginx conf file ? – code-8 Feb 05 '17 at 14:36
I havent use nginx like thing. I included it in only route file of laravel. @ihue – Mohammed Feb 05 '17 at 14:47
Can you please give an example, of including those as part of laravel route ? I am using Laravel 4. Is it compatible ? – code-8 Feb 06 '17 at 14:26
Yes it is..just include it after – Mohammed Feb 06 '17 at 14:45
Can you please give example as part of your answer ? – code-8 Feb 06 '17 at 14:55
Also, in order for me use those header, do I need to adjust anything in my headers ? – code-8 Feb 06 '17 at 14:55
NO any other thing you need to do.just copy and paste that three lines. @ihue – Mohammed Feb 06 '17 at 16:43

Receiving CORS Errors when trying to send an Angular GET Request

2 Answers2

Linked