复现Ajax跨域问题

做两个简单的小项目复现Ajax跨域问题. 后端语言使用Java
首先是一个简单的订单系统, 通过访问/loadOrderList, 最终以json串形式返回订单集合. 该项目使用Tomcat发布在7070端口.

@RequestMapping("/loadOrderList")

@ResponseBody

public List<Order> loadOrderList(String uid){

    //模拟订单数据

    Order o1 = new Order();

    o1.setId("111");

    o1.setTotal(333.33);

    o1.setDate("2019-4-29");

    Order o2 = new Order();

    o2.setId("222");

    o2.setTotal(444.44);

    o2.setDate("2019-5-29");

    Order o3 = new Order();

    o3.setId("333");

    o3.setTotal(555.55);

    o3.setDate("2019-6-29");

    List<Order> list = new ArrayList<>();

    list.add(o1);

    list.add(o2);

    list.add(o3);

    return list;

}

在另一个项目中做一个向订单系统发送一个ajax请求, 获取订单集合. 该项目使用Tomcat插件发布在9090端口.

//index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>Title</title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>

    <script type="text/javascript">

        function sendAjax() {

            $.post("http://localhost:7070/order/loadOrderList", "uid=1234", function (data) {

                alert(data);

            });

        }

    </script>

</head>

<body>

    <a href="javascript:sendAjax()">sendAjax</a>

</body>

</html>

点击sendAjax超链接向订单系统发送ajax请求.
通过开发者工具发现虽然服务器以状态码200响应回来, 但是控制台却报错了.
这就是Ajax跨域出错的一种表现, 下面分析原因.

Ajax跨域介绍

Ajax跨域问题是由浏览器的同源策略造成的, 首先要理解源这个概念.
我们可以通过协议+域名+端口确定一个源. 在上面的示例中, 你可以把一个项目理解为一个源. Ajax请求可以对源内的资源发起访问, 但是不同源之间进行Ajax就会有问题.
当向不同源的资源发起Ajax请求时, 浏览器会加上Origin字段来标识源

Accept: */*

Accept-Encoding: gzip, deflate, br

Accept-Language: zh-CN,zh;q=0.9

Connection: keep-alive

Content-Length: 8

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

Host: localhost:7070

Origin: http://localhost:9090   协议+域名+端口

服务器会根据Origin字段决定是否同意这次请求, 如果Origin指定的源不在许可范围内, 服务器会返回一个不带有Access-Control-Allow-Origin字段的响应. 浏览器解析时发现缺少了这个字段, 就会报错. 这种错误不能通过状态码识别, 因为状态码很有可能就是200(见上面的案例).

Ajax跨域解决方案

下面介绍最常用Ajax跨域解决方案.

一. 在服务端添加响应头`Access-Control-Allow-Origin`

既然我们已经知道了Ajax跨域失败是因为响应中缺少了响应头Access-Control-Allow-Origin, 那么就想办法加上去.
以Java项目为例, 在后端我们使用CORSFilter过滤器加上该响应头.
(假设是Maven项目), 首先在pom.xml中添加坐标

<dependency>

	<groupId>com.thetransactioncompany</groupId>

	<artifactId>cors-filter</artifactId>

	<version>2.5</version>

    <scope>runtime</scope>

</dependency>

然后在web.xml中对过滤器进行配置.

    <filter>

        <filter-name>CORS</filter-name>

        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>

        <init-param>

            <param-name>cors.allowOrigin</param-name><!--这个标签是关键, *代表所有源都能访问-->

            <param-value>*</param-value>

        </init-param>

        <init-param>

            <param-name>cors.supportedMethods</param-name>

            <param-value>GET, POST, HEAD, PUT, DELETE</param-value>

        </init-param>

        <init-param>

            <param-name>cors.supportedHeaders</param-name>

            <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>

        </init-param>

        <init-param>

            <param-name>cors.exposedHeaders</param-name>

            <param-value>Set-Cookie</param-value>

        </init-param>

        <init-param>

            <param-name>cors.supportsCredentials</param-name>

            <param-value>true</param-value>

        </init-param>

    </filter>

    <filter-mapping>

        <filter-name>CORS</filter-name>

        <url-pattern>/*</url-pattern>

    </filter-mapping>

配置后重启订单项目, 再次发起Ajax请求可以看到成功返回数据, 响应头中包含了Access-Control-Allow-Origin, 值为发起Ajax请求的源.

二. 使用JSONP解决

上面直接通过过滤器添加响应头的方法可以说是对症下药, 那么还有没有什么偏方呢?
还真的有. 在jsp文件中经常通过通过<script>标签引入一段js代码, 这段代码通常来源于网络, 也就是不同源. 那么我们不妨通过<srcipt>标签完成Ajax请求, 这样便顺带解决了跨域问题.
下面还是沿用上面的案例进行演示.
我们对发送ajax的jsp进行修改

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>Title</title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>

    <script>

        function doCallBack(data){

            var str = JSON.stringify(data);

            alert(str);

        }

    </script>

</head>

<body>

    <script src="http://localhost:7070/order/loadOrderList3?uid=111&callBack=doCallBack"></script>

</body>

</html>

上面的代码中, 我们首先定义了doCallBack()函数, 它接收一个字符串参数, 并且会把接收到的字符串显示出来.
然后在<body>标签中编写<script>标签, 我们将通过<script>标签请求订单系统, 订单系统将会返回一段js代码, 这段js代码会调用doCallBack()方法.
为了能够拼接出doCallBack(字符串参数...)js代码, 我们在订单系统中作如下操作.

@RequestMapping("/loadOrderList3")

@ResponseBody

public String loadOrderList3(String uid, String callBack){

    //模拟订单数据

    Order o1 = new Order();

    o1.setId("111");

    o1.setTotal(333.33);

    o1.setDate("2019-4-29");

    Order o2 = new Order();

    o2.setId("222");

    o2.setTotal(444.44);

    o2.setDate("2019-5-29");

    Order o3 = new Order();

    o3.setId("333");

    o3.setTotal(555.55);

    o3.setDate("2019-6-29");

    List<Order> list = new ArrayList<>();

    list.add(o1);

    list.add(o2);

    list.add(o3);

    //拼接js代码

    String result = callBack + "(" + JSON.toJSONString(list) + ")";

    return result;

}

这个想法是不是很妙? 明白这个原理之后, 我们可以使用jQuery方便进行JSONP操作, 在上面的代码中我们人为指定了一个名为doCallBack的函数, 而jQuery会随机用时间戳生成一个函数名, 原理和上面是一样的.
所以完成一开时点击超链接发送Ajax请求只需要如下几步.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>Title</title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>

    <script>

        function sendAjax(){

            $.getJSON("http://localhost:7070/order/loadOrderList3?callBack=?","uid=111",

            function (data) {

                var str = JSON.stringify(data);

                alert(str);

            });

        }

    </script>

</head>

<body>

    <a href="javascript:sendAjax()">sendAjax</a>

</body>

</html>

小结

上面两种解决办法在思路上有着本质的不同. 方案一抓住CORS跨域访问问题的本质, 在后端加上响应头解决跨域问题. 方案二JSONP利用的是<script>标签能够跨域获取js代码的特性, 绕过跨域问题.

扩展阅读：

Ajax跨域问题及解决方案的更多相关文章

ajax 跨域访问的解决方案
ajax 跨域访问的解决方案一.什么是跨域: 1.什么样的请求属于跨域: 域名,端口有任何一个不相同都属于跨域: 二.跨域的常用几种解决方案: 1.jsonp: 2.iframe: 3.webcon ...
Ajax跨域问题及解决方案 asp.net core 系列之允许跨越访问(Enable Cross-Origin Requests:CORS) c#中的Cache缓存技术 C#中的Cookie C#串口扫描枪的简单实现 c#Socket服务器与客户端的开发(2)
Ajax跨域问题及解决方案目录复现Ajax跨域问题 Ajax跨域介绍 Ajax跨域解决方案一. 在服务端添加响应头Access-Control-Allow-Origin 二. 使用JSONP ...
PHP Ajax 跨域问题最佳解决方案【摘自菜鸟教程】
PHP Ajax 跨域问题最佳解决方案分类编程技术 http://www.runoob.com/w3cnote/php-ajax-cross-border.html 本文通过设置Access-Co ...
ajax跨域原理以及解决方案
说明跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题前言强烈推荐阅读参考来源中的文章,能够快速帮助了解跨域的原理参考来源本文参考了以下来源浏览器同源政 ...
[转载]JQuery的Ajax跨域请求的解决方案
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuer ...
ajax跨域访问的解决方案
今天的工作中要访问摄像机内部的一个web站点,这就涉及到jquery的ajax跨域访问的问题.我使用的是jquery1.7的版本,下面总结如下: 问题一:一开始用IE调试,总是返回No Transpo ...
有关Ajax跨域请求的解决方案
前言最近博主在赶项目进度.所以微信二次开发那边的博文一直没有更新.后续时间会慢慢记录这个学习历程的.来年公司要开发微信小程序.到时也会记录一下历程. 闲话少说,今天在工作中遇到了SpringMVC接 ...
ajax跨域问题以及解决方案
转:https://blog.csdn.net/csdn_ds/article/category/6937392/3 在工作中,大家应该都遇到过ajax跨域问题,浏览器的错误如下: XMLHttpRe ...
ajax跨域请求的解决方案
一直打算改造一下自己传统做网站的形式. 我是.Net程序员,含辛茹苦数年也没混出个什么名堂. 最近微信比较火, 由于现在大环境的影响和以前工作的总结和经验,我打算自己写一个数据,UI松耦合的比较新潮的 ...

随机推荐

2017年12月16日 ASP.NET基本用法
ASP.NET初级添加利用css代码跟ASP.NET还有Javascript原生,LinQ来写增跟展示数据首先介绍一个非常好用的控件,灵活并且循环展示数据库里面的数据 <asp:Repeat ...
jsp servlet基础复习 Part2--GET，Post请求
最近进行servlet和jsp方面的梳理复习时,发现以前忽略了一个非常重要的知识点:get和post的请求(如果你觉得两者仅仅是提交数据量的大小以及方式不同就大错特错了)的正真区别,下面进行简答的整理 ...
模拟Springboot一:(零xml配置搭建SSM项目)
在spring官网文档中无论是spring的基础文档,还是spring-mvc文档都推荐我们使用javaconfig的方式来搭建项目间接说明 (优点:javaconfig配置>xml配置) 其 ...
初步理解require.js模块化编程
初步理解require.js模块化编程一.Javascript模块化编程目前,通行的Javascript模块规范共有两种:CommonJS和AMD. 1.commonjs 2009年,美国程序员R ...
二、NAT（地址转换模式）
刚刚我们说到,如果你的网络ip资源紧缺,但是你又希望你的虚拟机能够联网,这时候NAT模式是最好的选择.NAT模式借助虚拟NAT设备和虚拟DHCP服务器,使得虚拟机可以联网.其网络结构如下图所示: NA ...
linux下生成带符号的随机密码
cat /dev/urandom |tr -dc "[:graph:]"|fold -w 15|head 结果如下:
设计模式：备忘录（Memento）模式
设计模式:备忘录(Memento)模式一.前言备忘录模式用于保存和恢复对象的状态,相信大家看过我前面的拙作就会想到原型模式也能保存一个对象在某一个时刻的状态,那么两者有何不同的呢?原型模式保存 ...
正则表达式（python 2）
Python提供re模块,包含所有正则表达式的功能.由于Python的字符串本身也用\转义,所以要特别注意: s = 'ABC\\-001' # Python的字符串# 对应的正则表达式字符串变成:# ...
获取Excel的单元格数据类型（靠谱）
VBA中,单元格属性有NumberFormat可以获取单元格格式,比如: G/通式格式→常规 @→文本 yyyy/m/d→日期问题: G/通式格式,无法知道值是整数还是浮点数, yyyy/m/d如果 ...
lnmp环境下nginx配置‘负载均衡’
NGINX负载均衡分发请求的几种方式: 1.轮询(默认)每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除.2.weight 指定轮询几率,weight和访问比率成正比 ...

Ajax跨域问题及解决方案

复现Ajax跨域问题

Ajax跨域介绍

Ajax跨域解决方案

一. 在服务端添加响应头Access-Control-Allow-Origin

二. 使用JSONP解决

小结

Ajax跨域问题及解决方案的更多相关文章

随机推荐

热门专题

一. 在服务端添加响应头`Access-Control-Allow-Origin`