Angular HTTP GET CORS错误 [英] Angular HTTP GET CORS Error

问题描述

这是我的终点，如果我访问它的话

如何防止CORS错误？有什么我可以做我的数据显示？

解决方案

为什么我只有在使用angular时才会出错

每当您创建一个Web应用程序时，您都会收到该错误消息，该应用程序具有任何将跨源请求发送到 http： //d.biossusa.com/api/distributor?key= ***** 使用 XMLHttpRequest 或获取API 或任何使用这些API的库（例如jQuery）。

所以它不是特定于角度的问题。

至于为什么会出现此错误，这是因为浏览器限制了您的Web应用程序除非站点发送请求以选择允许它。

而站点选择允许跨站请求的方式是通过发送包含 Access-Control-Allow-Origin 标题的响应，即我ndicates源自它允许请求。

因此，发送访问控制 - 允许来源的站点：* 响应标题告诉浏览器它允许XHR /提取来自任何来源的跨源请求。

浏览器是检查 Access-Control-Allow-Origin 标题。 （以及唯一发送 Origin 请求标头的工具。）

---

<请考虑是否使用 curl 或其他来从服务器请求文档：服务器不检查 Origin >标题，如果请求的来源不符合 Access-Control-Allow-Origin 标题，则拒绝发送文档。无论如何，服务器都会发送响应。

就客户端而言， curl 和非浏览器工具don' t起源的概念始于开头，因此通常不会发送任何 Origin 标题。 （你可以让 curl 发送一个 - 你想要的任何值 - 但这没什么意义，因为服务器不关心它的值。）

和 curl 等，请不要检查 Access-Control-Allow-Origin 服务器发送的响应头，如果请求的 Origin 头与访问控制 - 允许不匹配，则拒绝获取文档-Origin 服务器响应头。他们只是得到文件。

但浏览器是不同的。浏览器引擎实际上是唯一一个拥有源头概念的客户端，它知道Web应用程序的JavaScript运行的实际来源。

与 curl 等，如果XHR或 fetch（）调用请求它，浏览器将不会让您的脚本获取文档从服务器的 Access-Control-Allow-Origin 标头中不允许的来源。

Here is my end point, if I visit it

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

I got this back

{"152":{"user":{"id":198,"firstname":null,"lastname":null,"username":"Lucerna-chem","email":"[e-mail]","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 was thinking to make an Angular GET 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>

but I kept getting nothing back, and I kept getting CORS error in the console.

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

解决方案

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.

这篇关于Angular HTTP GET CORS错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！