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) {

      })
    }
  }

})

前台报错，后台没反应：

查阅资料后发现这已经是跨域请求了，并了解了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请求作出处理，使请求通过预检。

解决方法：

在控制器接收到请求之前，增加一层拦截继承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

然后再发送实际请求