ajax跨域问题以及解决方案
转:https://blog.csdn.net/csdn_ds/article/category/6937392/3
在工作中,大家应该都遇到过ajax跨域问题,浏览器的错误如下:
XMLHttpRequest cannot load http://目标地址No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页面地址' is therefore not allowed access.
为什么会出现跨域问题
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。
在此说明一下,所谓的同源,指的是域名、协议、端口均相等。举例如下:
http://www.abc.com/a/b 调用 http://www.abc.com/d/c(非跨域)
http://www.abc.com/a/b 调用 http://www.def.com/d/c (跨域:域名不一致)
http://www.abc.com:81/a/b 调用 http://www.abc.com:82/d/c (跨域:端口不一致)
http://www.abc.com/a/b 调用 https://www.abc.com/d/c (跨域:协议不同)
请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。
在一个http请求中,http头部Referer或Origin字段标识了当前域名,Host字段标识了此时请求的域名。
故,如果我们在当前的js页面,通过ajax请求第三方的数据,就会出现浏览器的跨域问题。
解决跨域问题
解决跨域问题,有如下三种方式:
1、使用jsonp
2、服务器代理
3、在服务端设置response header中Access-Control-Allow-Origin字段。
使用jsonp
jsonp解决跨域问题的原理是,浏览器的script标签是不受同源策略限制的,我们可以在script标签中访问任何域名下的资源文件。利用这一特性,用script标签从服务器中请求数据,同时服务器返回一个带有方法和数据的js代码,请求完成,调用本地的js方法,来完成数据的处理。
前端实现,以Jquery的ajax方法为例:
- $.ajax({
- url:"",
- dataType:'jsonp',
- data:'',
- jsonp:'callback', //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
- success:function(result) {
- //成功的处理
- },
- error:function(){
- //错误处理
- }
- });
服务端此时返回的不能是普通的json字符串,而是一段可以被前端js执行的一段js代码。
比较一下json与jsonp格式的区别:
json格式:
- {
- "message":"获取成功",
- "state":"1",
- "result":{"name":"工作组1","id":1,"description":"11"}
- }
jsonp格式:
- callback({
- "message":"获取成功",
- "state":"1",
- "result":{"name":"工作组1","id":1,"description":"11"}
- })
从格式来看,jsonp是在json的基础上包装了一个方法名,此方法名是前端请求传过来的,如请求地址为:http://localhost:9999/tookApp/tbk/getItem?callback=JSONP_CALLBACK,那么方法名就是JSONP_CALLBACK。
下面提供一段java代码,对象转jsonp的工具类:
- package com.tooklili.app.web.util;
- import javax.servlet.http.HttpServletRequest;
- import org.apache.commons.lang.StringUtils;
- import org.springframework.web.context.request.RequestContextHolder;
- import org.springframework.web.context.request.ServletRequestAttributes;
- import com.fasterxml.jackson.databind.util.JSONPObject;
- /**
- *
- * @author ding.shuai
- * @date 2016年8月15日上午9:47:02
- */
- public class AppUtil {
- /**
- * 判断json字符串是否需要转化成jsonp格式
- * @param request
- * @param result
- * @return
- */
- public static Object conversionJsonp(Object result){
- HttpServletRequest request = ((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()).getRequest();
- return conversionJsonp(request, result);
- }
- public static Object conversionJsonp(HttpServletRequest request,Object result){
- String callback = request.getParameter("callback");
- if(StringUtils.isNotEmpty(callback)){
- return new JSONPObject(callback, result);
- }
- return result;
- }
- }
jsonp的缺点:
1、JSONP是一种非官方的方法,而且这种方法只支持GET方法,不如POST方法安全。(从实现机制就可明白)。
2、JSONP的实现需要服务器配合,如果是访问的是第三方的服务器,我们没有修改服务器的权限,那么这种方式是不可行的。
服务器代理
这种方式运用的就是服务器的反向代理技术,控制客户端和服务器的访问都从代理服务器经过,比如用nginx作为服务器代理,在nginx上配置客户端和第三方服务的反向代理,这样就可保证客户端、第三方是同源的了,同一个源,都来自代理服务器。
关于nginx的反向代理配置,可访问我的这篇博客:http://blog.csdn.net/csdn_ds/article/details/58605591
服务器代理的缺点:
开发比较麻烦,对开发环境比较严格,需要在本机上配置代理服务器。
优点:
完美解决使用jsonp,第三方服务没有修改权限的问题。程序的代码侵入性小,代码级别不需要考虑跨域问题。
在服务端设置response header中Access-Control-Allow-Origin字段
在被请求的Response Header中加入如下代码:
- // 指定允许其他域名访问
- response.setHeader("Access-Control-Allow-Origin", "*");
- // 响应类型
- response.setHeader("Access-Control-Allow-Methods", "POST");
- // 响应头设置
- response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
如果所有请求都想让其他域名的服务通过浏览器ajax请求到,可以通过Filter统一设置response header。
- package com.tooklili.app.web.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.HttpServletResponse;
- /**
- * 设置公共属性的过滤器
- * @author shuai.ding
- *
- * @date 2017年6月21日上午11:02:27
- */
- public class CommonSetFilter implements Filter{
- @Override
- public void init(FilterConfig filterConfig) throws ServletException {
- }
- @Override
- public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
- throws IOException, ServletException {
- //解决跨域问题
- HttpServletResponse httpServletResponse =(HttpServletResponse)response;
- // 指定允许其他域名访问
- httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
- // 响应类型
- httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST");
- // 响应头设置
- httpServletResponse.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
- chain.doFilter(request, response);
- }
- @Override
- public void destroy() {
- }
- }
此处说明一下,笔者亲测:只设置Access-Control-Allow-Origin属性也是可以的。
Access-Control-Allow-Origin:* 表示允许任何域名跨域访问
如果需要指定某域名才允许跨域访问,只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名
例如:response.setHeader(“Access-Control-Allow-Origin”,”http://www.client.com”);
缺点:
1、此种解决跨域方案,需要浏览器支持H5,因为这是HTML5解决跨域的方式,如果产品面向的是PC端,这种方式可能就不是一个好的解决方案,如果面向的是手机端,此方法不为一个简单、粗暴的好方式。
2、设置*,存在安全隐患。
总结
综上三种解决跨域的方案,个人感觉使用服务代理最好,没有破坏浏览器的安全策略,但这个对开发环境要高一点。设置response header的方式,根据具体情况分析,要考虑清楚产品面向的用户。对于jsonp这种方式,虽然没有破坏浏览器的安全策略,但只支持get方式的请求,有点不能接受,因为get传输有参数长度的限制,同时又要考虑传输中文的乱码问题,但如果项目中只是简单的查询、展示,这种方式还是可以考虑的。
其他好文推荐:
Access-Control-Allow-Origin 跨域设置多域名:http://www.jianshu.com/p/b587dd1b7086
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跨域问题及解决方案
目录 复现Ajax跨域问题 Ajax跨域介绍 Ajax跨域解决方案 一. 在服务端添加响应头Access-Control-Allow-Origin 二. 使用JSONP解决 小结 复现Ajax跨域问题 ...
- ajax跨域请求的解决方案
一直打算改造一下自己传统做网站的形式. 我是.Net程序员,含辛茹苦数年也没混出个什么名堂. 最近微信比较火, 由于现在大环境的影响和以前工作的总结和经验,我打算自己写一个数据,UI松耦合的比较新潮的 ...
随机推荐
- 安排:《蚂蚁花呗1234面:Redis+分布式架构+MySQL+linux+红黑树》
前言: 大厂面试机会难得,为了提高面试通关率,建议朋友们在面试前先复盘自己的知识栈,依据掌握程度划分重要.优先级,系统地去学习!如果不准备充分就去参加面试,既会失去进入大厂的机会,更是对自己的不负责. ...
- RabbitMQ消息丢失问题和保证消息可靠性-消费端不丢消息和HA(二)
继续上篇文章解决RabbitMQ消息丢失问题和保证消息可靠性(一) 未完成部分,我们聊聊MQ Server端的高可用和消费端如何保证消息不丢的问题? 回归上篇的内容,我们知道消息从生产端到服务端,为了 ...
- 使用ansible对思科交换机备份
先决条件 - 了解ansible基本操作 - 了解网络设备相关操作 - 了解linux相关操作 安装 安装EPEL yum install https://dl.fedoraproject.org/p ...
- OpenCvSharp 通过特征点匹配图片
现在的手游基本都是重复操作,一个动作要等好久,结束之后继续另一个动作.很麻烦,所以动起了自己写一个游戏辅助的心思. 这个辅助本身没什么难度,就是通过不断的截图,然后从这个截图中找出预先截好的能代表相应 ...
- JS函数提升和变量提升
1.1什么是函数提升和变量的提升? JS引擎在运行整个JS代码的过程中,分为俩步. 第一步是读取和解析JS代码,第二部是执行. 在引擎解析JS代码的时候,当解析器遇见变量声明(var 变量名)和函数声 ...
- (一)spring aop的两种配置方式。
sring aop的方式有两种:(1)xml文件配置方式(2)注解的方式实现,我们可以先通过一个demo认识spring aop的实现,然后再对其进行详细的解释. 一.基于注解的springAop配置 ...
- zstuoj 4423: panda和卡片
传送门:http://oj.acm.zstu.edu.cn/JudgeOnline/problem.php?id=4423 题意: 给定许多数字,这些数字都是2的倍数,问可以用这些数字组成多少个数字. ...
- hdu 5902 GCD is Funny
Problem Description Alex has invented a new game for fun. There are n integers at a board and he per ...
- 拿 C# 搞函数式编程 - 1
最近闲下来了,准备出一个 C# 搞 FP 的合集.本合集所有代码均以 C# 8 为示例. 可能你说,为什么要这么做呢?回答:为了好玩.另外,意义党们请 gun cu ke! C# 有委托,而且有 Fu ...
- Spring的事件监听机制
最近公司在重构广告系统,其中核心的打包功能由广告系统调用,即对apk打包的调用和打包完成之后的回调,需要提供相应的接口给广告系统.因此,为了将apk打包的核心流程和对接广告系统的业务解耦,利用了spr ...