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

待我称王封你为后i 2021-06-11 15:14 903阅读 0赞

### 问题描述： ###

采用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) {
    
          })
        }
      }
    
    })

前台报错，后台没反应：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70][]![20190228192623256.png][]

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

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

具体可以参考[http://javascript.ruanyifeng.com/bom/cors.html][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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 1][]

然后再发送实际请求

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190228192614199.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw==,size_16,color_FFFFFF,t_70
[20190228192623256.png]: /images/20210518/c386e4629be24219b82cdde59fcd4ffe.png
[http_javascript.ruanyifeng.com_bom_cors.html]: http://javascript.ruanyifeng.com/bom/cors.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 1]: /images/20210518/f1eb97503f6049698d0abbc63a2fa8f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 2]: /images/20210518/326095a505a647d896d676af56a685bb.png