Question

我目前正在开发一款使用Google Maps API的小型网络应用。我现在努力工作数周的问题是CORS，我已经尝试了其他程序员经常提出的所有可能的事情（修改.htaccess，httpd.conf;添加标题（＆＃39; Access-Control-Allow） -Origin：*＆＃39;）;到php和ajax-request等...但仍然收到一条错误消息，上面写着＆＃34; No＆＃39; Access-Control-Allow-Origin＆＃39 ;标头出现在请求的资源上。起源＆＃39; http://localhost＆＃39;因此不允许访问＆＃34; （另见screenshot with full error message）

当我使用＆＃34; Allow-Control-Allow-Origin：*＆＃34; -Plugin for Chrome时，一切正常，但这不是我满意的解决方案。

当我打开DevTools并查看我的index.php的标题时，似乎CORS标题就在那里，但是控制台一直在说“允许控制 - 允许 - 来源”＃39;标题仍然缺失！ https://i.stack.imgur.com/4G9tW.png

的index.php：

<?php
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
$method = $_SERVER['REQUEST_METHOD'];
if($method == "OPTIONS") {
  die();
}
?>
<!DOCTYPE html>
<html ng-app="myApp">
<!-- tags and code... -->

的javascript：

function getData(){
  var key = "....";
  var url = "https://maps.googleapis.com/maps/api/distancematrix/json?origins=" + $scope.origin + "&destinations=" + $scope.location.address + "|&mode=" + mode + "&key=" + key;

  $.ajax({
            url: url,
            dataType: 'JSON',
            jsonpCallback: 'callbackFnc',
            type: 'GET',
            async: false,
            crossDomain: true,
            success: function () { },
            failure: function () { },
            complete: function (data) {
                if (data.readyState == '4' && data.status == '200') {
                    console.log("SUCCESS");
                    console.log(data.responseJSON);
                    //do stuff
                }
                else {
                    console.log("FAIL");
                    console.log(data);
                }
            }
        });
}

CIController：

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class My extends CI_Controller {

    function __construct() {
        header('Access-Control-Allow-Origin: *');
        header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
        header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
        parent::__construct();
    }

    /**
     * Index Page for this controller.
     *
     * Maps to the following URL
     *      http://example.com/index.php/welcome
     *  - or -
     *      http://example.com/index.php/welcome/index
     *  - or -
     * Since this controller is set as the default controller in
     * config/routes.php, it's displayed at http://example.com/
     *
     * So any other public methods not prefixed with an underscore will
     * map to /index.php/welcome/<method_name>
     * @see https://codeigniter.com/user_guide/general/urls.html
     */
    public function index()
    {
        $this->load->helper('url'); 
        $this->load->view('index');
    }

    public function index_options() {
        return $this->response(NULL, REST_Controller::HTTP_OK);
    }

}

CodeIgnoterApp /应用/ htaccess的：

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

<IfModule authz_core_module>
    Require all denied
</IfModule>
<IfModule !authz_core_module>
    Deny from all
</IfModule>

CodeIgnoterApp /系统/ htaccess的：

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

<IfModule authz_core_module>
    Require all denied
</IfModule>
<IfModule !authz_core_module>
    Deny from all
</IfModule>

到目前为止，我已经在我的dekstop-PC和笔记本电脑（XAMPP）上运行了这个项目。我已经使用Springboot（前一段时间）和CodeIgniter（当前）作为后端。我也有一个版本没有使用localhost / backend-server（当然使用html而不是php），它没有任何CORS问题。

Answer 1

https://i.stack.imgur.com/t23UZ.png错误表示https://maps.googleapis.com/maps/api未在其回复中包含Allow-Control-Allow-Origin标题。

因此，该问题与您配置PHP代码的方式无关。您的代码未将该请求的响应标头设置为https://maps.googleapis.com/maps/api。该响应标头必须由https://maps.googleapis.com/maps/api本身设置，否则您需要通过代理发送请求，该代理将标头添加到浏览器最终看到的响应中。

但无论如何，根本问题是https://maps.googleapis.com/maps/api不支持客户端JavaScript在Web应用程序中运行的请求，就像您的代码尝试使用它一样。

相反，您需要使用受支持的Google Maps JavaScript API，其客户端代码与您尝试的不同。 sample for the Distance Matrix service看起来更像是这样：

<script>
var service = new google.maps.DistanceMatrixService;
service.getDistanceMatrix({
  origins: [origin1, origin2],
  destinations: [destinationA, destinationB],
  travelMode: 'DRIVING',
  unitSystem: google.maps.UnitSystem.METRIC,
  avoidHighways: false,
  avoidTolls: false
},…
</script>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

CORS不起作用（SpringBoot，CodeIgniter）

1 个答案: