CORS 不起作用(SpringBoot，CodeIgniter)

我目前正在开发一个使用Google Maps API的小型网络应用程序。我挣扎了几个星期的问题是 CORS，我已经尝试了其他程序员经常建议的所有可能的事情(修改 .htaccess、httpd.conf ;add header('Access-Control-Allow-Origin： *'); 到 php 和 ajax-request 等...)，但仍然收到一条错误消息，指出"请求的资源上不存在'Access-Control-Allow-Origin' 标头。因此不允许访问源"http://localhost"(另请参阅带有完整错误消息的屏幕截图)

当我使用Chrome的"允许控制-允许原产地：*"插件时，一切正常，但这不是我满意的解决方案。

当我打开 DevTools 并查看索引的标头时.php似乎 CORS 标头在那里，但控制台一直说"允许控制-允许-原产地"标头仍然丢失！ https://i.stack.imgur.com/4G9tW.png

索引.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/application/.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/system/.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(目前)作为后端。我还有一个不使用本地主机/后端服务器的版本(当然使用 html 而不是 php)，它没有任何 CORS 问题。

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不支持来自在 Web 应用程序中运行的客户端 JavaScript 的请求，就像您的代码尝试使用它一样。

相反，您需要使用受支持的Google Maps JavaScript API，其客户端代码与您正在尝试的代码不同。距离矩阵服务的示例如下所示：

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

相关内容

最新更新

热门标签：