您的当前位置:首页正文

ArcGIS Javascript 异常之No 'Access-Control-Allow-Origin' header

2023-11-09 来源:化拓教育网

开发过程中遇到此异常,查询后网上说是跨域访问的问题,给出的解决方案是通过JQuery的跨域访问机制来解决,

难道我需要直接找ArcGISTiledMapServiceLayer相关代码,去重构吗?

还有给出的解决方案如下,http://resources.arcgis.com/en/help/rest/apiref/config.html,大意就是要设置一下ArcGIS Server服务,可服务是别人的,设置不了。

 

代码如下,在地图类型切换时需要调用另一个网址,就报出了如下错误。

if (tp == "mp") { //移除之前 map.removeLayer(basemap); //地图 basemap = new ArcGISTiledMapServiceLayer("http://xxx.xxx.xxx.xxx.xxx.xxx"); $("#mptype").val("mp"); map.addLayer(basemap); }

实际上两个图层域名是差不多的,不知道为什么出现这个问题。

后来尝试了下,在地图初始化的时候就实例化两个ArcGISTiledMapServiceLayer,在地图切换的时候进行图层的添加、删除,不进行实例化,即解决问题。

大致代码如下:

function loadMap(lnt,lat,zo0o) { zoom=zo0o; require(["esri/map", "esri/toolbars/navigation", "esri/layers/ArcGISTiledMapServiceLayer"], function (Map, Navigation, ArcGISTiledMapServiceLayer) { options = { logo: false, fadeOnZoom: true, slider: true, sliderPosition: "bottom-left", sliderStyle: "large" }; iniLat = lat; iniLnt = lnt; map = new esri.Map("mapDiv", options); basemap = new ArcGISTiledMapServiceLayer("http://xxx.xxx.xxx.xxx"); annolayer = new ArcGISTiledMapServiceLayer("http://bb.bbb.ccc.ddd"); map.addLayer(annolayer); spatialReference = map.spatialReference; map.on("mouse-down", function (evt) { console.log(evt.mapPoint.x.toFixed(3) + "," + evt.mapPoint.y.toFixed(3)); }); map.centerAndZoom(new esri.geometry.Point(lnt, lat), zoom); navToolbar = new Navigation(map); }); }

地图切换代码修改如下:

function MapTypeSwitch(tp){ require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/config"], function (Map, ArcGISTiledMapServiceLayer, esriConfig) { esriConfig.defaults.io.corsDetection = false; if (tp == "mp") { //移除之前 $("#mptype").val("mp"); map.removeLayer(annolayer); map.addLayer(basemap); } }); }

 

ArcGIS Javascript 异常之No 'Access-Control-Allow-Origin' header

标签:

小编还为您整理了以下内容,可能对您也有帮助:

no access-control-allow-origin'header怎么设置?

如果跨域使用POST方式,可以使用创建一个隐藏的iframe来实现,与ajax上传图片原理一样,但这样会比较麻烦。

因此,通过设置Access-Control-Allow-Origin来实现跨域访问比较简单。

例如:客户端的域名是www.client.com,而请求的域名是www.server.com

如果直接使用ajax访问,会有以下错误

XMLHttpRequest cannot load http://www.server.com/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://www.client.com' is therefore not allowed access.

在被请求的Response header中加入

[php] view plain copy

// 指定允许其他域名访问  

header('Access-Control-Allow-Origin:*');  

// 响应类型  

header('Access-Control-Allow-Methods:POST');  

// 响应头设置  

header('Access-Control-Allow-Headers:x-requested-with,content-type');  

就可以实现ajax POST跨域访问了。

代码如下:

client.html 路径:http://www.client.com/client.html

[html] view plain copy

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  

<html>  

<head>  

<meta http-equiv="content-type" content="text/html;charset=utf-8">  

<title> 跨域测试 </title>  

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>  

</head>  

<body>  

<div id="show"></div>  

<script type="text/javascript">  

$.post("http://www.server.com/server.php",{name:"fdipzone",gender:"male"})  

.done(function(data){  

document.getElementById("show").innerHTML = data.name + ' ' + data.gender;  

});  

</script>  

</body>  

</html>  

server.php 路径:http://www.server.com/server.php

[php] view plain copy

<?php  

$ret = array(  

'name' => isset($_POST['name'])? $_POST['name'] : '',  

'gender' => isset($_POST['gender'])? $_POST['gender'] : ''  

);  

header('content-type:application:json;charset=utf8');  

header('Access-Control-Allow-Origin:*');  

header('Access-Control-Allow-Methods:POST');  

header('Access-Control-Allow-Headers:x-requested-with,content-type');  

echo json_encode($ret);  

?>  

Access-Control-Allow-Origin:* 表示允许任何域名跨域访问

如果需要指定某域名才允许跨域访问,只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名

例如:header('Access-Control-Allow-Origin:http://www.client.com');

如果需要设置多个域名允许访问,这里需要用php处理一下

例如允许 www.client.com 与 www.client2.com 可以跨域访问

server.php 修改为

[php] view plain copy

<?php  

$ret = array(  

'name' => isset($_POST['name'])? $_POST['name'] : '',  

'gender' => isset($_POST['gender'])? $_POS

javascript:var%20s%20=%20document.createElement('script');s.type='text/javas 之后可以轰炸网页真的吗

1楼的给正解!

只是普通的脚本定义对象