Ajax跨域问题的出现和解决

什么是跨域?

1)、请求是执行过去了,但是响应的数据拿不到

2)、浏览器有一个安全限制叫同源策略(针对ajax请求);

从http://localhost:80/member/apply.html页面发ajax发到http://localhost:8083/realauth/baseinfo这种就是跨域;

特点:

同源策略:协议名://主机号:端口号;必须一致;

任何一个不一致,ajax请求得到响应结果浏览器就不给你;

解决办法:

1)、客户端jsonp的方式;

2)、服务端允许跨域;  

原理:

  1、ajax请求浏览器会帮忙发出去;

  2、服务端会返回数据;

  3、如果服务端所在的http://主机名:端口号;和浏览器发送请求是来源的http://主机名:端口号一致。浏览器直接可以拿到响应数据;

  4、如果服务端所在的http://主机名:端口号;和浏览器发送请求来源的http://主机名:端口号 不一致。w3c标准规范;;

  如果不同源,浏览器应该禁止给客户端返回数据;

  5、数据最终没拿到的原因是浏览器的安全策略禁止;

  6、解决办法:

      1)、自己造一个不遵循安全标准的浏览器;

    2)、服务端命令浏览器【响应头】,你别管你自己的安全策略了,直接拿数据;【推荐--更安全】

<mvc:cors>
    <!--哪些请求允许别的浏览器跨域访问-->
    <mvc:mapping path="/**" allowed-origins="http://peer1:8020"/>
</mvc:cors>

  3)、浏览器发送跨域请求,服务端配合浏览器返回浏览器想要的数据【如果配合了浏览器就没有任何跨域的数据安全】;JSONP必须有服务端的配合;

  3.1)、服务端返回的数据类似于一个调用方法的语法格式:

  3.2)、页面上恰好有一个方法名就叫服务端返回的方法名:

function hello(data){
              alert(data);
}

  利用如下代码调用

<script src="http://localhost:8083/ajax-hello"></script>

7)、jsonp

即使服务端不配合,也没有配置过mvc:cros:dataType:"jsonp";数据能拿到,但是如果是json数据有可能导致客户端无法解析;

8)、可以快速使用MappingJackson来改造之前的方法:

@ResponseBody
@RequestMapping("/hello-jackson")
public MappingJacksonValue helloJacksonJsonp(String callback){
    Map<String, Object> map = new HashMap<>();
    map.put("user","zhangsan");
    map.put("age",18);
    TUser byId = userService.getById(6);
    map.put("query",byId);

    //jackson提供了整套json解决方法,保存jsonp
    //服务端返回数据的时候返回成  方法名(数据)
    //  jqueertdasdasda(json数据)
    MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(map);
    //设置jsonp回调函数的名
    mappingJacksonValue.setJsonpFunction(callback);
    return mappingJacksonValue;

}

9)、改造太多麻烦:我们直接采用,服务端设置允许跨域;(直接设置所有跨域都允许【默认就是这样】)。

  

时间: 2024-08-24 02:38:20

Ajax跨域问题的出现和解决的相关文章

Ajax跨域问题的两种解决方法

浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: header('Access-Control-Allow-Origin:*') 使用如下标头可以接受指定网站请求: header('Access-Control-Allow-Origin:http://www.abc.com') 所以,服务器写法: header('Access-Control-Al

【学亮IT手记】Ajax跨域问题精讲--jQuery解决跨域操作

什么是跨域 跨域,它是不同的域名(服务器)之间的相互的资源之间的访问. 当协议,域名,端口号任意一个不同,它们就是不同的域. 正常情况下,因为浏览器安全的问题,不同域之间的资源是不可以访问的. 跨域的解决方案 什么情况下会用到跨域? 一般情况,是在自己的内部的工程中会出现跨域的情况. 有三种解决方案: 1.服务器跨域(代理方案) 2.jsonp,<script>标签的开发策略. 3.XHR2,HTML5提供,一般是在移动开发中使用. jQuery解决跨域操作 在jquery中可以使用$.aja

jquery ajax跨域的完美解决方法(jsonp方式)

ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquer

AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?

ajax是异步的 JavaScript 和 XML.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 交互流程: 1--启动  获取XMlHttpRequest对象             2--open 打开url通道,并设置异步传输              3--send 发送数据到服务器             4--服务器接受数据并处理,处理完成后返回结果              5--客户端接收

解决Ajax跨域问题:Origin xx is not allowed by Access-Control-Allow-Origin.

解决Ajax跨域问题:Origin xx is not allowed by Access-Control-Allow-Origin. 今天一个Ajax跨域问题,纠结我半天,记录之. <html> <head> <title>title</title> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script>

深入浅出JSONP:解决AJAX跨域问题

本文主要讲解了如何去解决AJAX跨域的问题,从跨域的简单原理到JONP实现模式详细的讲解整个解决方案,最后利用jQuery可以很方便的实现JSONP来进行跨域访问. 上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异步从那个后台程序中取得的.由于又购买了新的服务器,客户想把web主页和那个后台程序分开来,后台程序被部署到了新的服务器上.不过这个项目是我的同事小福同志开发的,也就由

ajax跨域往php程序post数据时,php程序总是执行两次的解决方法

php程序是部署在IIS7上面,ajax提交数据时,遇到了两个问题,一个就是跨域,一个php程序总会被执行两次. 第一个问题的解决方法,是百度出来的,添加下面几行代码就可以了: header('Access-Control-Allow-Origin:*'); header("Access-Control-Allow-Headers: x-requested-with,content-type"); header('Access-Control-Allow-Methods: OPTION

JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

Jetty Cross Origin Filter解决jQuery Ajax跨域访问的方法

当使用jQuery Ajax post请求时可能会遇到类似这样的错误提示 XMLHttpRequest cannot oad http://xxxxxx. Origin http://xxxxxx is not allowed by Access-Control-Allow-Origin. 这是Ajax跨域访问权限的问题,服务器端不接受来自另一个不同IP地址的由脚本文件发出的http请求.解决这个问题需要在服务器端进行配置使服务器端可以接受来自不同域的脚本文件的http请求.一个简单的解决方法是