关于ajax post请求跨域问题的解决心得
最近啊,公司有个项目,需要做一个手机端APP的后台管理系统。所以用到了度文本编辑框,经过了好好一番周折,终于弄好了,带到上线的时候发现啊,只能使用ip去访问网页的时候上能穿图片他不会报跨域的问题,而使用域名的时候啊,他就会报一个跨域的问题。真心头疼啊。最后查阅了好多次的资料终于恒公了, 为了防止以后再次遇到这种问题,所以想随后把这个记录一下,也为了方便各位大神们的指点。谢谢……
下面我说说经过这一次的问题,我了解的几个问题,
1、ajax跨域请求的话可以选择多种方式, get方式很常见,他是利用jsonp去解决。
2、ajax poat请求需要利用cors技术,也就是设置请求头。
下面是代码。
response.setHeader("Access-Control-Allow-Origin", '*');
还需要注意的是这个post请求啊,他有俩种情况,一种是简单请求,一种是复杂请求,
在ie里面吧,用ip访问,他只是一次简单的请求,而在谷歌或者火狐等浏览器当中,他就会发起一起复杂请求事件。
什么是复杂请求呢?
就是浏览器会宪法一次请求去试探,你的请求头是否被允许,是否被通过,通过的话返回200或者202等成功标识,这样浏览器才会发送真正能的请求。
那么是什么区决定的呢? 看了好久发现是content-type值去决定的。
说到content-type,他是有一个默认的值,每个浏览器默认的还不一样,当然设置的方法也不一样。
行了不多说了吧。请各位大神看代码吧
后台是java
首先是设置xml文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="mergers" version="2.5">
<display-name>GateWay.Service</display-name>
<error-page>
<error-code>404</error-code>
<location>/errorpage/404.html</location>
</error-page>
<error-page>
<error-code>500</error-code>
<location>/errorpage/500.html</location>
</error-page>
<context-param>
<param-name>webAppRootKey</param-name>
<param-value>gateway.root</param-value>
</context-param>
<context-param>
<param-name>log4jConfigLocation</param-name>
<param-value>/WEB-INF/classes/log4j.properties</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.util.Log4jConfigListener</listener-class>
</listener>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>
/WEB-INF/classes/application.xml
</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<filter>
<filter-name>CharacterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CharacterEncodingFilter</filter-name>
<url-pattern>*.action</url-pattern>
<url-pattern>*.shtml</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>spring3</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>spring3</servlet-name>
<url-pattern>*.action</url-pattern>
</servlet-mapping>
<!-- 跨域请求过滤器 -->
<filter>
<filter-name>corsFilter</filter-name>
<filter-class>org.gateway.filter.CorsFilter</filter-class>
<init-param>
<param-name>allowOrigin</param-name>
<param-value>
http://192.168.100.67:8061,
http://cater.ypp2015.com,
</param-value>
</init-param>
<init-param>
<param-name>allowMethods</param-name>
<param-value>GET,POST,PUT,DELETE,OPTIONS</param-value>
</init-param>
<init-param>
<param-name>allowCredentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>allowHeaders</param-name>
<param-value>Origin,X-Requested-With,Content-Type,Accept</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>corsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>velocity</servlet-name>
<servlet-class>org.sinodata.framework.velocity.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>org.apache.velocity.toolbox</param-name>
<param-value>/WEB-INF/classes/toolbox.xml</param-value>
</init-param>
<init-param>
<param-name>org.apache.velocity.properties</param-name>
<param-value>/WEB-INF/classes/velocity.properties</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>velocity</servlet-name>
<url-pattern>*.shtml</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>DruidStatView</servlet-name>
<servlet-class>com.alibaba.druid.support.http.StatViewServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DruidStatView</servlet-name>
<url-pattern>/druid/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<session-config>
<session-timeout>7200</session-timeout>
</session-config>
</web-app>
接下来是Java代码
public class CorsFilter implements Filter {
private String allowOrigin;
private String allowMethods;
private String allowCredentials;
private String allowHeaders;
private String exposeHeaders;
@Override
public void init(FilterConfig filterConfig) throws ServletException {
allowOrigin = filterConfig.getInitParameter("allowOrigin");
allowMethods = filterConfig.getInitParameter("allowMethods");
allowCredentials = filterConfig.getInitParameter("allowCredentials");
allowHeaders = filterConfig.getInitParameter("allowHeaders");
exposeHeaders = filterConfig.getInitParameter("exposeHeaders");
}
@Override
public void doFilter(ServletRequest req, ServletResponse res,
FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res;
if (StringUtils.isNotEmpty(allowOrigin)) {
List<String> allowOriginList = Arrays.asList(allowOrigin.split(","));
if (CollectionUtils.isNotEmpty(allowOriginList)) {
String currentOrigin = request.getHeader("Origin");
if (allowOriginList.contains(currentOrigin)) {
response.setHeader("Access-Control-Allow-Origin", currentOrigin);
}
}
}
if (StringUtils.isNotEmpty(allowMethods)) {
response.setHeader("Access-Control-Allow-Methods", allowMethods);
}
if (StringUtils.isNotEmpty(allowCredentials)) {
response.setHeader("Access-Control-Allow-Credentials", allowCredentials);
}
if (StringUtils.isNotEmpty(allowHeaders)) {
response.setHeader("Access-Control-Allow-Headers", allowHeaders);
}
if (StringUtils.isNotEmpty(exposeHeaders)) {
response.setHeader("Access-Control-Expose-Headers", exposeHeaders);
}
chain.doFilter(req, res);
}
@Override
public void destroy() {
}
}
js代码
- $.ajax({
type: "post",
cache: false,
dataType: "text",
url: url,
async:true,
data:parms ,
success: function(data, textStatus){
var JSONObj = JSON.parse(data);
callback1.apply(this,[JSONObj]);
}
});
好了 今天就到这有点乱, 不经允许不得私自转发,后果自负。
关于ajax post请求跨域问题的解决心得的更多相关文章
- ajax发送请求跨域 - uri java代理
问题:ajax发送请求出现cors跨域 解决办法:可以通过java代理的方式,后台发送请求 1.get请求 public void proxyGet(String url) { try { URL r ...
- java 设置允许ajax XMLHttpRequest 请求跨域访问
怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域. 方案1: 使用XMLHttpRequest... 异步请求不能跨域访问,除非要访问的网页响应头信息设置为允许跨域访问. 将网页设置为允许 ...
- WebApp开发:ajax请求跨域问题的解决
服务端:PHP 客户端:Andorid, HTML5, jQuery, ajax 现象:本想通过jQuery的ajax功能从服务器取回数据存到手机的缓存里,结果总是错误,后来想到可能是跨域问题,所以查 ...
- 使用ajax怎么请求跨域资源
1.ajax中添加“xhrFields”和“crossDomain”,如: $.ajax({ url: url, data: data, type: "post", xhrFiel ...
- h5请求跨域问题Access-Control-Allow-Origin解决跨域
访问后端接口报错:No 'Access-Control-Allow-Origin' header is present on the requested resource 解决: Access-Con ...
- 处理Ajax请求跨域问题
ajax跨域的原理 ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resourc ...
- day78_淘淘商城项目_11_单点登录系统实现 + 用户名回显 + ajax请求跨域问题详解_匠心笔记
课程计划 1.SSO注册功能实现 2.SSO登录功能实现 3.通过token获得用户信息 4.ajax跨域请求解决方案--jsonp 1.服务接口实现 SSO系统就是解决分布式环境下登录问题的,本 ...
- 解决ajax请求跨域
跨域大部分需要通过后台解决,引起跨域的原因: 3个问题同时满足 才可能产生跨域问题,即跨域(协议,主机名,端口号中有一个不同就产生跨域) 下面是解决方法 方法一 // ajax请求跨域 /* *解决a ...
- 关于ajax请求跨域问题
jQuery中的异步请求跨域的方法: xhrFields: {withCredentials: true} 当设置为 true时,表示允许跨域: false时,表示禁止跨域
随机推荐
- java 抽象(abstract) 构造 静态(static) 总结--2017-03-02
抽象类:不能实例化!子类继承抽象类, 实例化子类对象才可以调用, 多态的体现; 抽象方法:必须被重写才能被调用; 静态方法:类名直接调用,或者实例化对象调用; 构造方法:new后面的括号里面带参数,就 ...
- angularjs+ionic注册页面表单验证(手机号、确认密码、60s后重发验证码)
在已建立tabs和路由的注册页面html: 功能: 进行了手机号.密码格式验证,两次密码输入是否相同的判断,都正确且复选框勾选后才可点击注册,进入tabs.mypage页面. 未进行验证码真正发送.获 ...
- Spring框架(3)---IOC装配Bean(注解方式)
IOC装配Bean(注解方式) 上面一遍文章讲了通过xml来装配Bean,那么这篇来讲注解方式来讲装配Bean对象 注解方式需要在原先的基础上重新配置环境: (1)Component标签举例 1:导入 ...
- .NET入行之工作前
时间就像轻风一样,刻意感受的时候几乎把你吹倒,不留意的时候又从你身边轻轻飘走了:长此以后,我怕自己会变得麻木,忘记了原来的样子.所以还是决定给自己留点什么,万一哪天忘记了,还可以再翻起来. 工作两年的 ...
- C#:判断100--999之前的水仙花数
//判断100--999之前的水仙花数.水仙花数举例:153=13+53+33. using System;public class Program { public static void ...
- Triangle Problems
Triangle Problem songxiuhuan 宋修寰 Import the Junit and eclemma Choose the project and right click, ch ...
- 购买的wemall 6.0商城系统源码分享
使用方法 1.解压目录 2.cd wemall6 && npm i 3.配置config下的config.json 4.npm start 摒弃以往的开发框架thinkphp,使用no ...
- 2020: [Usaco2010 Jan]Buying Feed, II
2020: [Usaco2010 Jan]Buying Feed, II Time Limit: 3 Sec Memory Limit: 64 MBSubmit: 220 Solved: 162[ ...
- 读headFirst设计模式 - 装饰者模式
继承可以在复用父类代码的情况下扩展父类的功能,但同时继承增加了对象之间的耦合度,所以要慎用继承.那么有没有既能扩展父类的功能,又能使对象间解耦的方法呢?答案是肯定的,这就是我们今天要学习的装饰者模式. ...
- java实体属性对应mysql和SQL Server 和Oracle 数据类型对应
1:Java数据类型与MySql数据类型对照表 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) VARCHAR L+N VARCHAR java.lang.String 12 ...