`
月亮不懂夜的黑
  • 浏览: 155505 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ajax跨域报错

 
阅读更多

在项目中使用ajax访问百度地图的api时,报

post request is No 'Access-Control-Allow-Origin' header is present on the requested resource.' 

为什么会出这样的错误呢?这是因为所有支持Javascript的浏览器都会使用同源策略这个安全策略。看看百度的解释:

  同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。

  这就是引起为何取不到数据的原因了,那如何才能解决跨域的问题呢?

这里就使用到了jsonp

具体实现

//获取用户当前坐标
function findUserLocation(){
	var resUrl = "http://api.map.baidu.com/location/ip?ak=dKkDYZr7Mprkruw9BTlIw9d8&coor=bd09ll";
	$.ajax({
        type : "get", //jquey是不支持post方式跨域的
        async:false,
        url : resUrl, //跨域请求的URL
        dataType : "jsonp",
        //传递给请求处理程序,用以获得jsonp回调函数名的参数名(默认为:callback)
        jsonp: "callback",
		beforeSend :function(msg){
			$("#showmsg").html("正在查询您的绑定信息……");
		},
        //成功获取跨域服务器上的json数据后,会动态执行这个callback函数
        success : function(msg){ 
            var jsonObj = eval(msg);
			if(0 == jsonObj.status){
				var contentJson = eval(jsonObj.content);
				var pointJson = eval(contentJson.point);
				$("#userLat").val(pointJson.y);
				$("#userLng").val(pointJson.x);
				//提交表单
				$("#subform").attr("action","/uxunwxweb/base/gotopage.do?gotolink=ATMMap");
				$("#subform").submit();
			}else{
				$("#showmsg").html("请求坐标出错,当前状态码为"+jsonObj.status);
			}
        }
    });
	
}

 这样既可正确获取到百度返回的参数了。

0
0
分享到:
评论

相关推荐

    ajax跨域访问报错501的解决方法

    总的来说,解决AJAX跨域访问报错501的问题,主要步骤包括: 1. 检查服务器是否支持请求方法,如果是非标准`contentType`,可考虑更改或移除。 2. 在服务器端配置CORS,允许指定的源进行跨域请求。 3. 对于非简单请求...

    Ajax跨域问题 解决方案

    ### Ajax跨域问题解决方案 #### 一、什么是Ajax跨域 **原理:** Ajax跨域问题的核心在于浏览器的“同源策略”。同源策略是一种安全措施,用于限制一个域名下的文档或脚本如何与另一个来源的资源进行交互。简单来说...

    ajax跨域问题!

    ### AJAX跨域问题详解 #### 一、引言 在Web开发中,由于浏览器的安全策略限制,同源策略(Same-origin policy)对于不同来源的数据访问进行了严格的限制,从而导致了跨域问题的发生。本篇文章将深入探讨AJAX跨域...

    ajax跨域访问WCP搜索,返回JSON数据

    标题中的“ajax跨域访问WCP搜索,返回JSON数据”涉及到的是Web开发中关于AJAX、跨域资源共享(CORS)以及JSON数据格式的应用。在Web应用中,AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况...

    解决ajax跨域请求数据cookie丢失问题

    本文将通过前端使用jquery以及后端服务使用php作为示例,来详细介绍如何解决Ajax跨域请求时数据中cookie丢失的问题。 首先,我们需要了解几个关键概念。同源策略是浏览器的一个安全机制,规定来自不同源的文档或者...

    PHP Ajax跨域问题解决方案代码实例

    本文通过设置Access-Control-Allow-Origin来实现跨域。 例如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com。 如果直接使用ajax访问,会有以下错误: XMLHttpRequest cannot load ...

    解决ajax不能访问本地文件问题(利用js跨域原理)

    总的来说,通过理解和利用JavaScript的跨域机制,我们可以解决AJAX在本地文件系统上的访问限制。尽管JSONP和本文中的方法在某些场景下有效,但在实际开发中,更推荐使用CORS,因为它提供了更安全、更可控的跨域访问...

    基于iframe实现ajax跨域请求 获取网页中ajax数据

    其实问题的关键就在于,浏览器在解析ajax请求地址时会和当前网页的地址进行比较,如果是跨域的,那就禁止掉并且报错。那么我们如果让浏览器解析出的ajax地址和当前网页的解析地址一样,浏览器不就不会禁止我们的请求...

    json ajax ajax框架

    2. **跨域安全**:由于同源策略的限制,AJAX请求通常只能在同源下进行。为实现跨域请求,服务器需要设置适当的CORS(Cross-Origin Resource Sharing)策略。 3. **异步处理**:AJAX的异步特性意味着在发送请求后,...

    Ajax 跨域如何实现

    【Ajax 跨域实现】 Ajax(异步JavaScript和XML)是一种...总结,Ajax跨域涉及到浏览器的安全策略,有多种方法可以实现,包括JSONP、CORS和代理服务器等。开发者应根据实际需求和目标浏览器的兼容性选择合适的方法。

    浅谈Ajax跨域Session和跨域访问

    Ajax跨域请求涉及到浏览器的同源策略(Same-origin Policy),这是一个安全机制,限制了JavaScript只能访问与当前页面同协议、同域名、同端口的资源。然而,随着Web服务的开放和API接口的广泛使用,跨域请求的需求变...

    PHP处理Ajax请求与Ajax跨域问题

    **Ajax发起JSONP跨域请求** JSONP(JSON with Padding)是一种绕过同源策略的跨域解决方案。它利用HTML `<script>`标签可以跨域加载资源的特性,通过动态插入`<script>`标签来实现跨域请求。在jQuery中,可以设置`...

    IE8 jquery ajax获取静态资源报错TypeError 拒绝访问

    这个插件利用了IE8及更高版本提供的XDomainRequest对象,它是专为跨域Ajax请求设计的一个低级接口,可以绕过同源策略的限制。 然而,"TypeError:拒绝访问"错误在IE8中可能由以下原因导致: 1. **URL格式不正确**...

    关于python的bottle框架跨域请求报错问题的处理方法

    然而,在开发过程中,遇到跨域资源共享(CORS)问题是很常见的,尤其是在前端使用Ajax进行跨域请求时。本文将深入探讨如何解决Bottle框架中的跨域请求报错问题。 首先,我们需要理解跨域请求的基本概念。默认情况下...

    arcgis跨域问题

    6. **测试跨域访问**:最后,你可以通过发起一个简单的Ajax请求,或者使用浏览器的开发者工具检查网络请求,来验证跨域设置是否成功。 通过以上步骤,你应该能够成功解决ArcGIS的跨域问题,使得Web应用程序可以无...

    ASP.NET MVC中设置跨域访问问题

    js禁止向不是当前域名的网站发起一次ajax请求,即使成功respone了数据,但是你的js仍然会报错。这是JS的同源策略限制,JS控制的并不是我们网站编程出现了问题。客户端(网页)和后台编程都可以有效解决这个问题。...

    Apache中配置支持CORS(跨域资源共享)实例

    当使用ajax跨域请求时,浏览器报错:XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin.肯定是跨域的问题,如果用jsonp或者proxy的方式进行修改的话未免需要太大的工程量,所以采用...

    WebApi 跨域问题解决方案:CORS

    2. 在MVC项目中,如Home控制器的Index视图,使用Ajax向WebApiCORS发起跨域请求。 3. 在WebApiCORS项目中,创建一个如ChargingController的API控制器,提供所需的数据接口。 4. 未配置CORS时,运行项目,浏览器会因...

Global site tag (gtag.js) - Google Analytics