javascript - Receiving CORS Errors when trying to send an Angular GET Request - Stack Overflow

admin管理员组

文章数量:1434909

Here is my end point:

=#####

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=".12.4.js"></script>

<script src=".4.8/angular.min.js"></script>

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

  <p>Today's wele 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.headersmon['X-Requested-With'];
  }

  ]);

  app.controller('myCtrl', function($scope, $http) {
    $http.get("=#####")
    .then(function(response) {
        $scope.myWele = 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?

Here is my end point:

http://d.biossusa./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./jquery-1.12.4.js"></script>

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

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

  <p>Today's wele 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.mon['X-Requested-With'];
  }

  ]);

  app.controller('myCtrl', function($scope, $http) {
    $http.get("http://d.biossusa./api/distributor?key=#####")
    .then(function(response) {
        $scope.myWele = 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?

• javascript
• angularjs
• https
• get
• cors

Share Improve this question Follow edited Jun 22, 2019 at 9:12 sideshowbarker♦ 88.6k3030 gold badges215215 silver badges212212 bronze badges asked Feb 5, 2017 at 3:02 code-8code-8 59k120120 gold badges391391 silver badges670670 bronze badges 6

• It’s not clear how this if different from the question you asked at stackoverflow./questions/42032996/…. 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 ♦ Commented Feb 5, 2017 at 4:07
• What do you usng in your backend.Generally the error es 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 Commented Feb 5, 2017 at 4:08
• Yes the back end is php Laravel and Nginx. – code-8 Commented Feb 5, 2017 at 4:11
• @sideshowbarker : I'm just showing to u that I can get the data fine when I visit it directly. How es I don't get the cors error when I visit it directly? – code-8 Commented Feb 5, 2017 at 4:12
• 1 stackoverflow./questions/41936492/cross-origin-request/…. Checkout this link – Mohammed Commented Feb 5, 2017 at 4:14

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 2

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./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 ing 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.

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.

本文标签： javascriptReceiving CORS Errors when trying to send an Angular GET RequestStack Overflow