Question

这是我的终点：

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

我收到了这个回复：

{"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 .........

我正在尝试向该网址发送Angular GET请求。这就是我所拥有的：

<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>

但是，我继续在控制台中收到CORS错误。

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

Answer 1

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

每当您创建具有任何客户端JavaScript的Web应用程序时，您将收到该错误，该JavaScript使用http://d.biossusa.com/api/distributor?key=*****或Fetch API或任何XMLHttpRequest向Access-Control-Allow-Origin发送跨域请求使用它们的库（例如，jQuery）。

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

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

网站选择允许跨源请求的方式是发送一个包含Access-Control-Allow-Origin: *标头的响应，该标头指示它允许来自哪些来源。

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

浏览器是检查Origin标头的唯一工具。（以及发送curl请求标头的唯一工具。）

考虑您是否使用Origin或其他东西从服务器请求文档：服务器不检查Access-Control-Allow-Origin标头，如果请求来源与请求来源不匹配则拒绝发送文档curl标题。无论如何，服务器都会发送响应。

就客户而言，Origin和非浏览器工具没有开头的概念，因此通常不会发送任何curl标头。（你可以让curl发送一个你想要的任何值 - 但这是没有意义的，因为服务器不关心它的价值。）

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

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

与fetch()等不同，如果请求XHR或Access-Control-Allow-Origin的来自服务器<dependency> <groupId>org.apache.xmlbeans</groupId> <artifactId>xmlbeans</artifactId> <version>2.6.0</version> <exclusions> <exclusion> <groupId>stax</groupId> <artifactId>stax-api</artifactId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.14</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>3.14</version> <exclusions> <exclusion> <groupId>stax</groupId> <artifactId>stax-api</artifactId> </exclusion> <exclusion> <groupId>xml-apis</groupId> <artifactId>xml-apis</artifactId> </exclusion> <exclusion> <groupId>dom4j</groupId> <artifactId>dom4j</artifactId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>ooxml-schemas</artifactId> <version>1.3</version> </dependency>标题中不允许的来源，浏览器不会让您的脚本获取文档

Answer 2

你需要添加这个：

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

在laravel中，将其包含在Route文件中。

尝试发送Angular GET请求时收到CORS错误

2 个答案: