vue上传文件本地DevServer代理可走通，部署后跨域问题解决（二）

接上篇，从控制台可以看到前端上传文件的动作会同时触发两个请求：options和post

options.png

post.png

并不是因为post请求token没带过去，从第二张截图里看到post请求头带了token 而是因为最开始先发的options请求返回了403，那么后面的post请求则不会发出去

简单请求:
只要同时满足以下条件就属于简单请求
1.请求方法是以下三种方法之一：GET POST HEAD
2.Http的头信息不超出以下几种字段：Accept Accept-Language Content-Language Last-Event-ID
3.Content-Type 只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
非简单请求:
其他的请求皆属于非简单请求/预检请求.

上传文件post请求带的请求头token是自定义的字段，因此属于非简单请求，会先发预检请求

OPTIONS
浏览器在某些请求中，在正式通信前会增加一次HTTP查询请求，称为"预检"请求（preflight）。 OPTIONS方法是用于请求获得由Request-URI标识的资源在请求/响应的通信过程中可以使用的功能选项。通过这个方法，客户端可以在采取具体资源请求之前，决定对该资源采取何种必要措施，或者了解服务器的性能。 该请求方法的响应不能缓存。 浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

跨域请求.png

发送预检请求，服务端返回的响应头是否允许跨域，允许的话则发送后续的post请求。从前端报错也可以看出：

Access to XMLHttpRequest at 'http://localhost:8077/' from origin 'http://localhost:8099' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这里考虑在后端代码options请求时给响应头加上允许跨域的，后续的post请求则带着允许跨域的

response.addHeader("Access-Control-Allow-Origin", "*");

尝试了这种方式前端报错了

Access to XMLHttpRequest at 'http://localhost:8077/token/assigncase/' from origin 'http://localhost:8099' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

因为上传文件请求后端接口需要带token，:with-credentials=true
允许跨域时不能带这种属性，于是从前端把这一属性去掉了
之后前端又报了另一个错

Access to XMLHttpRequest at 'http://localhost:8077/token/assigncase/' from origin 'http://localhost:8099' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

那就从后端加判断，当预检请求是options就返回200成功的状态码

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
            HttpServletRequest req = (HttpServletRequest) request;
            HttpServletResponse rep = (HttpServletResponse) response;

            //设置允许跨域的配置
            // 这里填写你允许进行跨域的主机ip（正式上线时可以动态配置具体允许的域名和IP）
            String origin = req.getHeader("Origin");
            if(origin == null) {
                origin = req.getHeader("Referer");
            }
            // 对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“*”
            rep.setHeader("Access-Control-Allow-Origin", origin);
            // 表示允许发送cookie
            rep.setHeader("Access-Control-Allow-Credentials", "true");
            String method = req.getMethod();
            if (method.equals("OPTIONS")) {
                //检测是options方法则直接返回200，允许跨域
                rep.setStatus(200);
                return;
//            rep.setHeader("Access-Control-Allow-Origin", "*"); 携带token的请求头，这一步设置允许特定的地址http://localhost:8099跨域也不管用
            }
            // 允许的访问方法
            rep.setHeader("Access-Control-Allow-Methods","POST, GET, PUT, DELETE, OPTIONS");
            // Access-Control-Max-Age 用于 CORS 相关配置的缓存
            rep.setHeader("Access-Control-Max-Age", "3600");
        rep.setHeader("Access-Control-Allow-Headers","token,Origin,X-Requested-With,Content-Type,Accept");

至此问题解决～