ArcGIS Javascript 异常之No 'Access-Control-Allow-Origin' header
开发过程中遇到此异常,查询后网上说是跨域访问的问题,给出的解决方案是通过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楼的给正解!
只是普通的脚本定义对象