Vue发送ajax post请求,变为options请求,并返回错误代码403的解决方案

问题描述:
采用vue发送ajax请求

var vm = new Vue({
  el:"#myModal",
  data:{
    moduleName:"",
    moduleIp:""
  },
  methods:{
    addModule:function () {
      console.log("add");
      $.ajax({
        url: "http://localhost:8801/management/saveModuleInfo",
        type: "post",
        contentType: "application/json;charset=UTF-8",
        dataType: "json",
        data: JSON.stringify({
          moduleName: this.moduleName,
        })
      }).success(function (res) {
 
      })
    }
  }
 
})

经postman测试,post请求一切正常
Vue发送ajax post请求,变为options请求,并返回错误代码403的解决方案_第1张图片

前台报错,后台没反应,仔细一看,是请求方式变成了OPTIONS
Vue发送ajax post请求,变为options请求,并返回错误代码403的解决方案_第2张图片

查阅资料后发现这已经是跨域请求了,并了解了CORS 请求中的两类:简单请求(simple request)和非简单请求(not-so-simple request)。

在非简单请求中,浏览器会在正式通信之前,增加一次 HTTP 查询请求(OPTIONS请求),称为“预检”请求(preflight)。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些 HTTP 动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。这是为了防止这些新增的请求,对传统的没有 CORS 支持的服务器形成压力,给服务器一个提前拒绝的机会,这样可以防止服务器大量收到DELETE和PUT请求,这些传统的表单不可能跨域发出的请求。

具体可以参考http://javascript.ruanyifeng.com/bom/cors.html

问题总结:
浏览器会首先发送预检请求OPTIONS请求,当OPTIONS请求通过之后,会再次发送我们当前的实际请求,所以我们要做的是让请求通过预检。

解决思路:

对OPTIONS请求作出处理,使请求通过预检。

解决方法:

对跨域请求进行配置(基础步骤,必不可少)

public class WebMvcConfig implements WebMvcConfigurer {

    /**
     * 跨域配置处理,前端启动的接口是8080,后端的接口是8888
     * 端口不一样,不同的服务器请求,自然就算作是跨域请求了
     *
     * 因此要在这里要允许前端的8080端口来访问我们后端的8888的接口
     *
     * 问题记录:发出
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //这里是允许访问的域名,可根据端口号和ip进行更改
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080", "http://121.89.200.204:8080")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

在控制器接收到请求之前,增加一层拦截继承HandlerInterceptor:

package com.goods.management.controller;
 
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
/**
 * 请求拦截器,处理跨域问题
 */
public class CommonInterceptor implements HandlerInterceptor {
 
	private List<String> excludedUrls;
 
	public List<String> getExcludedUrls() {
		return excludedUrls;
	}
 
	public void setExcludedUrls(List<String> excludedUrls) {
		this.excludedUrls = excludedUrls;
	}
	/**
	 *
	 * 在业务处理器处理请求之前被调用 如果返回false
	 * 从当前的拦截器往回执行所有拦截器的afterCompletion(),
	 * 再退出拦截器链, 如果返回true 执行下一个拦截器,
	 * 直到所有的拦截器都执行完毕 再执行被拦截的Controller
	 * 然后进入拦截器链,
	 * 从最后一个拦截器往回执行所有的postHandle()
	 * 接着再从最后一个拦截器往回执行所有的afterCompletion()
	 *
	 * @param  request
	 *
	 * @param  response
	 */
	public boolean preHandle(HttpServletRequest request, HttpServletResponse response,
									 Object handler) throws Exception {
		response.setHeader("Access-Control-Allow-Origin", "*");
		response.setHeader("Access-Control-Allow-Methods", "*");
		response.setHeader("Access-Control-Max-Age", "3600");
		response.setHeader("Access-Control-Allow-Headers",
				"Origin, X-Requested-With, Content-Type, Accept");
		return true;
	}
 
	// 在业务处理器处理请求执行完成后,生成视图之前执行的动作
	public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
								  ModelAndView modelAndView) throws Exception {
 
	}
 
	/**
	 * 在DispatcherServlet完全处理完请求后被调用
	 * 当有拦截器抛出异常时,
	 * 会从当前拦截器往回执行所有的拦截器的afterCompletion()
	 * @param request
	 * @param response
	 * @param handler
	 */
	public void afterCompletion(HttpServletRequest request, HttpServletResponse response,
										 Object handler, Exception ex) throws Exception {
 
	}
}

并通过xml引入到spring上下文中(这里先采用xml的形式)


<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd">
 
	<mvc:interceptors>
		<mvc:interceptor>
			<mvc:mapping path="/**"/>
			<bean class="com.goods.management.controller.CommonInterceptor">
				<property name="excludedUrls">
					<list>
						<value>/value>
					list>
				property>
			bean>
		mvc:interceptor>
	mvc:interceptors>
 
beans>

如果你是springboot项目,还需要在主入口中增加注解

@ImportResource(locations = "classpath:/springDispatcherServlet-servlet.xml")

这样就可以了。

实现效果:
先发送OPTIONS请求,返回200

然后再发送实际请求

————————————————
复制于大佬的博客,很好的解决了我的问题,非常感谢!!!
版权声明:本文为CSDN博主「c&0xff00」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_37968613/article/details/88042616

你可能感兴趣的:(笔记,前端,vue.js,ajax,postman)