完美解决axios跨域请求出错的问题


Posted in Javascript onFebruary 05, 2018

错误信息:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 403

随着前端框架的发展,如今前后端数据分离已经成了趋势,也就是说,前端只需要用ajax请求后端的数据合成页面,后端仅仅提供数据接口,给数据就行,好处就是前端程序员再也不用在自己的本地搭建Web服务器,前端也不需要懂后端语法,后端也不需要懂前端语法,那么简化了开发配置,也降低了合作难度。

常规的GET,POST,PUT,DELETE请求是简单请求(相对于OPTIONS请求),但是OPTIONS有点儿特别,它要先发送请求问问服务器,你要不要我请求呀,要我就要发送数据过来咯(这完全是根据自己的理解写的,如果有误,敬请谅解,请参考阮一峰大神原文。)

在Vue的项目里,Http服务采用Axios,而它正是采用OPTIONS请求。

如果仅仅在header里面加入: 'Access-Control-Allow-Origin':*,是并不能解决问题的,错误就是如文章开头所示。

这儿就需要后台对OPTIONS请求额外处理。

本文以Spring MVC为例:

添加一个拦截器类:

public class ProcessInterceptor implements HandlerInterceptor {

  @Override
  public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) throws Exception {
    httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
    httpServletResponse.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
    httpServletResponse.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    httpServletResponse.setHeader("X-Powered-By","Jetty");

    String method= httpServletRequest.getMethod();
    if (method.equals("OPTIONS")){
      httpServletResponse.setStatus(200);
      return false;
    }
    System.out.println(method);
    return true;
  }
  @Override
  public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, ModelAndView modelAndView) throws Exception {
  }
  @Override
  public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception {
  }
}

在spring-mvx.xml配置Spring 拦截器:

<mvc:interceptors> 
    <bean class="cn.tfzc.ssm.common.innterceptor.ProcessInterceptor"></bean> 
  </mvc:interceptors>

至此,问题已经解决:

完美解决axios跨域请求出错的问题

以上这篇完美解决axios跨域请求出错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
vue 页面加载进度条组件实例
Feb 05 #Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 #Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 #Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 #Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 #Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 #Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 #Javascript
You might like
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
轻松实现php文件上传功能
2017/02/17 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
js常用代码段收集
2011/10/28 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
python 文件和路径操作函数小结
2009/11/23 Python
跟老齐学Python之Python安装
2014/09/12 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
Python学习之os模块及用法
2020/06/03 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
体育老师的教学自我评价分享
2013/11/19 职场文书
精彩的推荐信范文
2013/11/26 职场文书
企业宣传策划方案
2014/05/29 职场文书
煤矿安全生产标语
2014/06/06 职场文书
2014年项目工作总结
2014/11/24 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
python脚本框架webpy的url映射详解
2021/11/20 Python