尝试发送角度GET请求时收到CORS错误 [英] Receiving CORS Errors when trying to send an Angular GET Request

问题描述

这是我的终点：

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

解决方案

为什么只有在使用角形时才会出现错误

每当您制作一个具有任何客户端JavaScript的Web应用程序时，都会收到该错误，该客户端JavaScript将跨域请求发送到 http： //d.biossusa.com/api/distributor?key = ***** 使用 XMLHttpRequest 或获取API 或使用这些API的任何库。

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

就为什么会出现此错误，这是因为浏览器限制了您的Web应用从JavaScript发出跨域请求-除非发送请求的站点选择允许它。

网站选择允许跨域请求的方式是通过发送包含 Access-Control-Allow-Origin 标头的响应来指示

因此，一个发送 Access-Control-Allow-Origin的站点：* 响应标头告诉浏览器，它允许来自任何来源的XHR / Fetch跨域请求。

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

---

考虑是否使用 curl 或其他方法从服务器请求文档：服务器不检查 Origin 标头，并在请求源与 Access-Control-Allow-Origin 标头不匹配时拒绝发送文档。

就客户端而言， curl 和非浏览器工具都不会发送响应。 t没有起源的概念，因此通常不要发送任何 Origin 头文件。 （您可以使 curl 发送一个-随心所欲，但是没有意义，因为服务器不在乎该值是什么。）

和 curl 等，请勿检查 Access-Control-Allow-Origin 响应头，如果请求的 Origin 头与 Access-Control-Allow不匹配，则拒绝获取文档服务器响应中的-Origin 标头。他们只是得到文档。

但是浏览器是不同的。浏览器引擎实际上是唯一具有起源概念的客户端，并且知道运行Web应用程序的JavaScript的实际起源。

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

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":"[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 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?

解决方案

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.

这篇关于尝试发送角度GET请求时收到CORS错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！