JSONP和CORS两种跨域方式的简单介绍和解决方案实例
随着软件开发分工趋于精细,前后端开发分离成为趋势,前端同事负责前端页面的展示及页面逻辑处理,服务端同事负责业务逻辑处理同时通过API为前端提供数据也为前端提供数据的持久化能力,考虑到前后端同事开发工具和习惯的不同,必然需要将前后端项目进行独立,再者考虑到网站访问速度的问题,需要将静态资源部署到CDN服务器上这样项目分离也成为了必然。然而项目分离部署分离带来的问题就是跨域请求的问题,本例对比较流行的两种跨域访问方式(Jsonp和CORS)进行讨论。
一、简要介绍
1.1、JSONP
JSONP是利用浏览器对script的资源引用没有同源限制,通过动态插入一个script标签,当资源加载到页面后会立即执行的原理实现跨域的。JSONP是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback或者开始就定义一个回调方法,参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
JSONP只支持GET请求而不支持POST等其它类型的HTTP请求,它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题,JSONP的优势在于支持老式浏览器,弊端也比较明显:需要客户端和服务端定制进行开发,服务端返回的数据不能是标准的Json数据,而是callback包裹的数据。
1.2、CORS
CORS是现代浏览器支持跨域资源请求的一种方式,全称是"跨域资源共享"(Cross-origin resource sharing),当使用XMLHttpRequest发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin,后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据。
CORS与JSONP的使用目的相同,但是比JSONP更强大,CORS支持所有的浏览器请求类型,承载的请求数据量更大,开放更简洁,服务端只需要将处理后的数据直接返回,不需要再特殊处理。
二、跨域解决方案距离
2.1、JSONP方案实现跨域
前段AJAX请求
$.ajax({
url: "http://otherdomain.com/manage/role/get",
async: false,
type: "get", dataType: "jsonp",
data:{
"id":1
},
jsonp: "callback",
jsonpCallback:"fn",
success: function(data){
alert(data.code);
},
error: function(){
alert('fail');
}
})
服务端响应数据
@RequestMapping("/manage/role/get")
@ResponseBody
public String get(HttpServletRequest request, HttpServletResponse response) {
BaseOutput outPut = new BaseOutput();
try {
QueryFilter filter = new QueryFilter(request);
logger.info(filter.toString());
String id = filter.getParam().get(MainConst.KEY_ID);
if(!StringUtil.isEmpty(id)) {
ImRole role = roleService.getByPk(filter);
outPut.setData(role);
}
else {
outPut.setCode(OutputCodeConst.INPUT_PARAM_IS_NOT_FULL);
outPut.setMsg("The get id is needed.");
}
} catch (Exception e) {
logger.error("获取角色数据异常!", e);
outPut.setCode(OutputCodeConst.UNKNOWN_ERROR);
outPut.setMsg("获取角色数据异常! " + e.getMessage());
}
return "fn("+JsonUtil.objectToJson(outPut)+")";
}
注意内容:
1、Ajax请求需要设置请求类型为Jsonp
dataType: "jsonp"
2、Ajax请求需要设置回调函数,当前函数值必须与服务器响应包含的callback名称相同
jsonpCallback:"fn"
3、Ajax请求可以设置jsonp(可选),传递给请求处理程序或页面,用以获得jsonp回调函数名的参数名,默认为:callback
jsonp: "callback"
4、服务端返回Json数据必须使用jsonpCallback设置的值进行包裹
return "fn("+JsonUtil.objectToJson(outPut)+")"
2.2、CORS方案实现跨域
前段AJAX请求
function test() {
$.ajax({
url: "http://localhost:8080/AdsServer/manage/role/get",
type: "get",
async: false,
data:{
"id":1
},
dataType:"json",
withCredentials:true,
success: function(data){
alert(data);
alert(data.code);
},
error: function(){
alert('fail');
}
})
}
服务端响应数据
@RequestMapping("/manage/role/get")
@ResponseBody
public String get(HttpServletRequest request, HttpServletResponse response) {
BaseOutput outPut = new BaseOutput();
try {
QueryFilter filter = new QueryFilter(request);
logger.info(filter.toString());
String id = filter.getParam().get(MainConst.KEY_ID);
if(!StringUtil.isEmpty(id)) {
ImRole role = roleService.getByPk(filter);
outPut.setData(role);
}
else {
outPut.setCode(OutputCodeConst.INPUT_PARAM_IS_NOT_FULL);
outPut.setMsg("The get id is needed.");
}
} catch (Exception e) {
logger.error("获取角色数据异常!", e);
outPut.setCode(OutputCodeConst.UNKNOWN_ERROR);
outPut.setMsg("获取角色数据异常! " + e.getMessage());
}
return JsonUtil.objectToJson(outPut);
}
服务端增加过滤拦截器(web.xml)
<filter>
<filter-name>crossDomainFilter</filter-name>
<filter-class>com.luwei.core.filter.CrossDomainFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>crossDomainFilter</filter-name>
<url-pattern>*</url-pattern>
</filter-mapping>
服务端增加过滤拦截器(java)
package com.luwei.core.filter; import java.io.IOException; import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import org.apache.commons.lang.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory; import com.luwei.console.mg.constant.ApplicationConfiConst; /**
*
* <Description> TODO<br>
*
* @author lu.wei<br>
* @email 1025742048@qq.com <br>
* @date 2017年1月4日 <br>
* @since V1.0<br>
* @see com.luwei.console.mg.tag <br>
*/
public class CrossDomainFilter implements Filter {
private Logger logger = LoggerFactory.getLogger(getClass()); public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
ApplicationConfiConst confiConst = (ApplicationConfiConst) ContextUtil.getBean("applicationConfiConst");
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest request = (HttpServletRequest) req;
String referer = request.getHeader("referer");
String origin = null;
if (null != referer) {
String[] domains = confiConst.getCanAccessDomain().split(",");
for (String domain : domains) {
if (StringUtils.isNotEmpty(domain) && referer.startsWith(domain)) {
origin = domain;
break;
}
}
}
response.setHeader("Access-Control-Allow-Origin", origin);
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE,PATCH");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
// 是否支持cookie跨域
response.addHeader("Access-Control-Allow-Credentials", "true"); String requestURI = ((HttpServletRequest) req).getRequestURI();
long begin = System.currentTimeMillis();
chain.doFilter(req, res);
if (logger.isDebugEnabled()) {
logger.debug("[Request URI: " + requestURI + "], Cost Time:" + (System.currentTimeMillis() - begin) + "ms");
}
}
}
增加设置能够通过跨域访问的服务器地址
#设置能够访问接口的域(多个通过都好分割)(不能配置127.0.0.1)
CAN_ACCESS_DOMAIN=http://localhost:8020,http://localhost:9999,http://localhost:8080
注意内容:
1、Ajax请求必须要设置withCredentials属性为true
withCredentials:true
2、服务端需要配置过滤器,讲配置能够进行跨域访问服务器的地址进行配置
response.setHeader("Access-Control-Allow-Origin", origin);
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE,PATCH");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
// 是否支持cookie跨域
response.addHeader("Access-Control-Allow-Credentials", "true");
3、withCredentials设置成true时,Access-Control-Allow-Origin不支持通过*的方式进行统配
4、Access-Control-Allow-Origin不能直接配置多个请求服务器,但是可以通过静态配置多个的方式,然后根据referer匹配,匹配到哪个则设置Access-Control-Allow-Origin为哪个的方式来配置多个
后记:
jqGrid配置跨域请求的方式为:
ajaxGridOptions: {
xhrFields: {
withCredentials: true
}
},
参考:
http://www.ruanyifeng.com/blog/2016/04/cors.html
http://www.cnblogs.com/dojo-lzz/p/4265637.html
JSONP和CORS两种跨域方式的简单介绍和解决方案实例的更多相关文章
- JSONP和CORS两种跨域方式的优缺点及使用方法原理介绍
随着软件开发分工趋于精细,前后端开发分离成为趋势,前端同事负责前端页面的展示及页面逻辑处理,服务端同事负责业务逻辑处理同时通过API为前端提供数据也为前端提供数据的持久化能力,考虑到前后端同事开发工具 ...
- Javascript几种跨域方式总结
在客户端编程语言中如javascript,同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法.只有当两个域具有相同的协议,相同的主机,相同的端口时,我们就认定 ...
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探
更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...
- Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)
由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...
- jsonp的三种跨域方式
1.通过jq的$.ajax()完成跨域,这是我比较喜欢的一种方式. 代码如下: $.ajax({ type:'get', async:true, url:'地址', dataType:'jsonp', ...
- 「JavaScript」JS四种跨域方式详解
原文地址https://segmentfault.com/a/1190000003642057 超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript ...
- 「JavaScript」四种跨域方式详解
超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由. 1. JSONP 首先要介绍的跨域方法必然是 JSON ...
- java web 的 几种跨域方式
- 允许浏览器跨域访问web服务端的解决方案
今天和同事探讨了前后端如何真正实现隔离开发的问题,如果前端单独作为服务发布,势必会涉及到无法直接调用后端的接口的问题,因为浏览器是不允许跨域提交请求的. 所谓跨域访问,就是在浏览器窗口,和某个服务端通 ...
随机推荐
- UML学习---交互
在系统中,对象都不是孤立存在的,它们相互之间通过传递消息进行交互.交互是一种行为,由语境中的一组对象为达到某一目的而交换的一组消息构成.
- utf8转gbk,libcurl中文乱码处理
这两个转码在网页客户端处理用很常见,所使用的平台为VS2010,字符集采用多字节字符集 utf8转gbk string UTF8ToGBK(const std::string& strUTF8 ...
- 如何利用Matlab进行ROC分析
ROC曲线基本知识: 判断分类器的工作效率需要使用召回率和准确率两个变量. 召回率:Recall,又称"查全率", 准确率:Precision,又称"精度".& ...
- 安装ant问题
1 设置path, 在windwos 7下要重启 2 重启后,cmd----ant -version Unable to locate tools.jar. Expected to find i ...
- Bat文件, Services
创建Bat文件自启动Windows Service; Services: sc stop/delete/query/find "service name"; Service Fol ...
- Canvas基础
1.1. 什么是 Canvas canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提 ...
- system_call中断处理过程分析
本文所有的分析内容都是基于Linux3.18.6内核,鉴于对应不同内核版本,系统调用的实现不相同.若需要分析其他版本内核的系统调用的实现过程,请谨慎参考. system_call函数的功能是用来响应外 ...
- 机器学习之分类器性能指标之ROC曲线、AUC值
分类器性能指标之ROC曲线.AUC值 一 roc曲线 1.roc曲线:接收者操作特征(receiveroperating characteristic),roc曲线上每个点反映着对同一信号刺激的感受性 ...
- winform在设置控件enabled=false后,无法更改控件字体颜色的问题
项目界面设计的时候,发现在设置button的enabled=false后,原本设计的字体颜色跟预设的不一样,查了一些资料后,在网上看到这样一段代码: [System.Runtime.InteropSe ...
- javascript原始数据类型compareto引用数据类型--近3天不太会的地方
ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型.也有其他的叫法,比如原始类型和对象类型,拥有方法的类型和不能拥有方法的类型,还可以分为可变类型和不可变类型,其实这些叫法都是依据这两 ...