RPC跨域问题
理解 ajax 的跨域访问
服务器段,使用 CORSFilter 过滤器解决跨域问题
前端使用 JSONP 解决跨域问题
Ajax 跨域介绍
Ajax 跨域问题
建立 ajax-origin 项目
4.0.0
com.zxw
ajax-origin
1.0-SNAPSHOT
war
ajax-origin Maven Webapp
http://www.example.com
4.3.18.RELEASE
1.2
2.5
2.0
2.9.0
jstl
jstl
${jstl.version}
javax.servlet
servlet-api
${servlet-api.version}
provided
javax.servlet
jsp-api
${jsp-api.version}
provided
ajax
org.apache.tomcat.maven
tomcat7-maven-plugin
2.2
/ajax
9090
发送 Ajax 请求
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
Insert title here
sendAjax
观察跨域问题
Ajax 跨域解决方案
- 服务器段解决
服务端设置 response header 中 Access-Control-Allow-Origin 字段
CORSFilter 解决跨域访问原理
通过 CORSFilter 过滤器在服务器端修改 Http 的响应头
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: http://example.com:8080/
修改服务提供者，原服务提供者代码见https://blog.csdn.net/Xw_Vivian/article/details/102594472
添加 CORSFilter 依赖
4.0.0
com.zxw
order
1.0-SNAPSHOT
war
order Maven Webapp
http://www.example.com
4.3.18.RELEASE
1.2
2.5
2.0
2.9.0
com.thetransactioncompany
cors-filter
2.5
runtime
com.zxw
resources
1.0-SNAPSHOT
jstl
jstl
${jstl.version}
javax.servlet
servlet-api
${servlet-api.version}
provided
javax.servlet
jsp-api
${jsp-api.version}
provided
org.springframework
spring-webmvc
${spring.version}
com.fasterxml.jackson.core
jackson-databind
${jackson.version}
order
org.apache.tomcat.maven
tomcat7-maven-plugin
2.2
/
7070
web.xml 配置 CORSFilter
order
index.html
index.htm
index.jsp
default.html
default.htm
default.jsp
default
/favicon.ico
org.springframework.web.context.ContextLoaderListener
contextConfigLocation
classpath:applicationContext-*.xml
encodingFilter
org.springframework.web.filter.CharacterEncodingFilter
encoding
utf-8
CORS
com.thetransactioncompany.cors.CORSFilter
cors.allowOrigin
*
cors.supportedMethods
GET, POST, HEAD, PUT, DELETE
cors.supportedHeaders
Accept, Origin, X-Requested-With, Content-Type, Last-Modified
cors.exposedHeaders
Set-Cookie
cors.supportsCredentials
true
CORS
/*
encodingFilter
/*
springmvc
org.springframework.web.servlet.DispatcherServlet
contextConfigLocation
classpath:springmvc.xml
1
springmvc
/
结果：
- 前端 JSONP 解决
利用 script 标签,不受同源策略的限制,用户从服务请求数据,服务器返回一个带有方法和数据的 js 代码。
JSONP 解决跨域访问原理
在 js 中，我们直接用 XMLHttpRequest 请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的 js 脚本文件却是可以的，jsonp 正是利用这个特性来实现的。
修改服务提供者，原服务提供者代码见https://blog.csdn.net/Xw_Vivian/article/details/102594472
添加 fastjson 依赖
4.0.0
com.zxw
order
1.0-SNAPSHOT
war
order Maven Webapp
http://www.example.com
4.3.18.RELEASE
1.2
2.5
2.0
2.9.0
com.alibaba
fastjson
1.2.47
com.zxw
resources
1.0-SNAPSHOT
jstl
jstl
${jstl.version}
javax.servlet
servlet-api
${servlet-api.version}
provided
javax.servlet
jsp-api
${jsp-api.version}
provided
org.springframework
spring-webmvc
${spring.version}
com.fasterxml.jackson.core
jackson-databind
${jackson.version}
order
org.apache.tomcat.maven
tomcat7-maven-plugin
2.2
/
7070
修改 OrderController 类
/**
* 接收http请求 响应订单集合 （异步）
* jackson将list对象转成json串（@ResponseBody）
*/
@RequestMapping("/loadOrderList03")
@ResponseBody
public String loadOrderList03(String uid,String callback){
System.out.println(uid);
//创建3个order
Order o1=new Order();
o1.setId("001");
o1.setTotal(325.0);
o1.setDate("2019-10-16");
Order o2=new Order();
o2.setId("002");
o2.setTotal(25.0);
o2.setDate("2019-12-16");
Order o3=new Order();
o3.setId("003");
o3.setTotal(315.0);
o3.setDate("2019-09-16");
//将三个订单放入list集合
List list=new ArrayList<>();
list.add(o1);
list.add(o2);
list.add(o3);
//result 是需要响应到客户端的 js 代码
String result=callback+"("+ JSON.toJSONString(list)+")";
return result;
} 启动服务提供者
修改服务消费者
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
Insert title here
sendAjax
启动服务消费者
jquery 对 jsonp 支持
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
Insert title here
sendAjax
结果：
