浏览器http跨域请求

浏览器跨域原因

vue中axios跨域cookie携带处理

vue的配置，如果不想用cookie，前台不必做任何处理， 如果需要使用cookie，则在main.js中配置axios.defaults.withCredentials=true; 即可。如图：

后台跨域处理

需要添加WebFilter进行过滤，先上截图，再付上代码

代码：

@javax.servlet.annotation.WebFilter(filterName = "WebFilter",urlPatterns = {"/*"})
@Order(1)
public class WebFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest,ServletResponse servletResponse,FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest req = (HttpServletRequest)servletRequest;
        HttpServletResponse resp = (HttpServletResponse)servletResponse;
        String origin = req.getHeader("Origin");
        if(origin == null) {
            origin = req.getHeader("Referer");
        }
        resp.setHeader("Access-Control-Allow-Origin", origin);            // 允许指定域访问跨域资源
        resp.setHeader("Access-Control-Allow-Credentials", "true");   // 允许客户端携带跨域cookie，此时origin值不能为“*”，只能为指定单一域名
        resp.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Cookie,token");
        resp.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        resp.setHeader("Access-Control-Expose-Headers","cookieId");
        resp.setHeader("cookieId",req.getSession().getId());
        filterChain.doFilter(servletRequest, servletResponse);
    }
    @Override
    public void destroy() {
    }
}

注意boot中使用WebFilter时需要在启动类添加扫描注解
@ServletComponentScan

为了帮助理解，只是为了解决问题不用以下内容

后台允许跨域最重要的设置

String origin = req.getHeader("Origin");
if(origin == null) {
    origin = req.getHeader("Referer");
}
resp.setHeader("Access-Control-Allow-Origin", origin);            // 允许指定域访问跨域资源

启动项目，在浏览器network中随便查看一个请求，可看到如下内容：

所以可以理解为何我们的后台要写上方最重要的配置，目的就是允许跨域起源是来自指定的ip端口号，由于设置允许起源中字段无法用 * 匹配所有跨域请求，所以只能通过请求头中的信息去获取设定，如果为了安全，最好手动指定自己的前端页面启动的访问地址，这样不用担心第三方开发页面来访问自己的服务器。
附上截图解释：

如果确定自己web端会运行在哪个ip和地址，为了安全最好写死，或引用自定义的配置文件中，指定只接受来自自己web项目的跨域请求，就不用从请求头中进行动态获取了

附 cookie禁用使用session问题

在请求头中添加如下形式即可: Cookie:JSESSIONID=#{sessionid}
其中 #{sessionid}可由登录时的首次请求响应头中获取到，响应头中的形式：
Set-Cookie:JSESSIONID=483A8B5F67A30771ADD3DCF7EF1FD7CB; 如果默认请求响应头中未包含该信息，可让后台开发主动写出到自定义响应头中