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请求一切正常

前台报错，后台没反应，仔细一看，是请求方式变成了OPTIONS：

查阅资料后发现这已经是跨域请求了，并了解了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的形式）

<?xml version="1.0" encoding="UTF-8"?>
<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