完美解决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 相关文章推荐
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
JQuery开发的数独游戏代码
Oct 29 Javascript
javascript面向对象编程代码
Dec 19 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
js实现产品缩略图效果
Mar 10 Javascript
详解vue的diff算法原理
May 20 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 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统计时间和内存使用情况示例分享
2014/03/13 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
js获取select标签选中值的两种方式
2014/01/09 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
js尾调用优化的实现
2019/05/23 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
python查找指定具有相同内容文件的方法
2015/06/28 Python
Python制作刷网页流量工具
2017/04/23 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python调用staf自动化框架的方法
2018/12/26 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
python conda操作方法
2019/09/11 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
Python基于内置函数type创建新类型
2020/10/22 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
会计自我鉴定范文
2013/10/06 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
应届生如何写自荐信
2014/01/05 职场文书
关爱留守儿童标语
2014/06/18 职场文书
圣诞晚会主持词
2015/07/01 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
小学毕业教师寄语
2019/06/21 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers