完美解决axios跨域请求出错的问题
错误信息：
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跨域请求出错的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了vue3.2 Composition API项目依赖升级示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了正确快速使用Vue中的插槽和配置代理的相关知识,插槽分为三种，分别是默认插槽、具名插槽、作用域插槽，下面分别列出了如何使用这三种插槽，需要的朋友可以参考下2023-01-01
解决vscode Better Comments插件在vue文件中不显示相对应的颜色的问题
最近使用了Better Comments这款插件，发现在ts文件中可以显示对应的颜色，但在vue文件中并不显示对应颜色 ，下面小编给大家分享解决方法，感兴趣的朋友跟随小编一起看看吧2022-09-09
通过命令npm install vux --save添加vux，在相关配置文件中配置信息，具体代码添加方法，大家参考下本文2017-11-11
本篇文章主要介绍了详解VUE2.X过滤器的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了解决vue项目router切换太慢问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue2.0采用了虚拟DOM来代替对真实DOM的操作，最后通过某种机制来完成对真实DOM的更新，渲染视图。这篇文章主要介绍了vue2.0的虚拟DOM渲染,需要的朋友可以参考下2018-08-08
vite+vue3+element-plus项目搭建的方法步骤
因为vue3出了一段时间了，element也出了基于vue3.x版本的element-plus，vite打包听说很快，尝试一下，感兴趣的可以了解一下2021-06-06
vue如何解决sass-loader的版本过高导致的编译错误
这篇文章主要介绍了vue如何解决sass-loader的版本过高导致的编译错误问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
平常使用Vue开发时,一个项目中多个地方需要用到的相同组件通常我们会封装为一个公共组件,所以我们可以将封装好的组件打包发布至npm,本文主要介绍了vue组件发布成npm包,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
最新评论