SpringBoot----前后端跨域拦截

SpringBoot----前后端跨域拦截
学习来源：百度 xxbkpi-zhangmin
学习程度：了解 1 

    前言：起初用IDEA的初始化功能创建了Web+Mybatis+MySQL的后端配置以及前端Vue的环境。前端只是简单的写了几个数据显示模块，模仿着写了用于get、post的axios请求函数，后端就是基本的4大件（controller、entity、mapper、service）和application.yml的mysql数据源配置。
    回到正题，最开始用前端请求后端地址的时候，出现了下面几种情况：
    问题1：前端使用axios.post(url,data,config)的时候，怎么尝试都不能调通，并且调试看到报（错误信息1）的那样错误（如图1），但是把url放到postman工具上调用，又是可以正常获取数据（如图2）。
    
    错误信息1：Access to XMLHttpRequest at 'http://localhost:8089/queryAll' from origin 'http://localhost:8085' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.[Vue warn]: Error in v-on handler (Promise/async): "Error: Network Error"

                                                                                                         图1

    

                                                                                                    图2

    

解决方案：
    请求的现象先不管，先把报错给解决了。报错原因：因为浏览器出于安全的考虑，会限制访问本站点以外的资源。（当然针对这个，也可以把浏览器的这个限制给关掉。）开始看到报错时，
    第一个想法时把'Access-Control-Allow-Origin'对应的'Origin'这个请求头给加上，但是发现，在加上'Origin'之后，除了页面不能访问，postman工具也不能访问，直到我看到参考文献中，禁止修改的消息首部网站内容才知道，原来HTTP请求首部并不是所有都能修改的，所以添加请求头这个想法失败。
    
    第二个方法是添加@CrossOrigin注解，这个也是后来才知道，看着他的源代码，本质是实现了第一个想法的操作，在添加上@CrossOrigin注解后，内部默认origins = "*"，支持所有跨域访问。
        小插曲：现在Vue页面可以请求到数据，但是页面端第一次请求的时候，会出现调用两次的情况（如图4,5），通过百度，原来又是跨域的搞事情，因为在跨域请求的时候，除get方式的http请求，都会先发送一个请求方法是"OPTIONS"的预检请求，这个我选择忽视了。

                                                                             图4

                                                                       图5

    第三个方法，虽然第二种添加@CrossOrigin注解，解决了问题，但是需要在被调用的接口上一一添加，太麻烦了，所以把Filter给安排上了（记得@SpringBootApplication(scanBasePackages = {"com"})，Filter这个要被扫描注册到哦）。（代码1）
        当然，这种方法也会有方法二中的小插曲，但是可以在Filter中判断如果是"OPTIONS"请求方法时，直接返回。

                                                                                           代码1

package com.common.Filter;

import org.springframework.boot.web.servlet.ServletComponentScan;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Arrays;

//source:zhangMin - xxbkpi
@Component
@ServletComponentScan
@WebFilter(filterName = "AppFilter", urlPatterns = "/*")
public class AppFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        ArrayList<String> allowOrigins = new ArrayList<String>();
        allowOrigins.add("http://localhost:8085");
        allowOrigins.add("http://localhost:8085");
        filterConfig.getServletContext().setAttribute("allowOrigins", allowOrigins);
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType(MediaType.APPLICATION_JSON_VALUE);
        if (!Arrays.asList(new String[]{"POST", "GET", "HEAD", "OPTIONS"}).contains(request.getMethod())) {
//            if(request.getMethod().equals("OPTIONS"))
//                return;
            response.setStatus(403);
            servletResponse.getWriter().print("非法的请求类型！");
            return;
        }
        ArrayList<String> allowOrigins = (ArrayList<String>) servletRequest.getServletContext().getAttribute("allowOrigins");
        String origin = request.getHeader("Origin");
        if (allowOrigins.contains(origin)) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        }
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "PUT, POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type");

        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

参考资料：
1、禁止修改的消息首部：https://developer.mozilla.org/zh-CN/docs/Glossary/%E7%A6%81%E6%AD%A2%E4%BF%AE%E6%94%B9%E7%9A%84%E6%B6%88%E6%81%AF%E9%A6%96%E9%83%A8
2、https://www.bbsmax.com/A/n2d9Mq2wdD/