vue脚手架+Tomcat（servlet）发生跨域问题如何解决？

vue脚手za架+Tomcat（servlet）发生跨域问题如何解决？

一个域的三要素：

• 协议
• 主机
• 端口
  处于安全因素考虑浏览器默认不支持后台ajax跨域访问，三者都一样才可以访问

前端处理方法（通过代理，不推荐）

1、创建文件夹

可以在src目录下创建config.js文件也可以在根目录直接创建vue.config.js文件

2、在config.js中写入代码

module.exports={
    devServer: {
        proxy: {
            '/api': {//"/api"为以后网络的根目录
                target: 'http://localhost:8080/',//tomcat的端口号
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }

}

3、在main.js中写入

let $axios = axios.create({
    baseURL: "/api",//对用上文
    timeout:2000,
});

后端处理（真正解决了）

可以写在过滤器中，也可以直接写到请求中

resp.setHeader("Access-Control-Allow-Origin", "*");//允许跨域的主机是哪一个 *表示所有的主机
resp.setHeader("Access-Control-Allow-Credentials", "true");//是否允许https跨域
resp.setHeader("Access-Control-Allow-Methods", "*");//允许哪种请求方式
resp.setHeader("Access-Control-Max-Age", "3600");//允许多久
resp.setHeader("Access-Control-Allow-Headers", "Authorization,Origin,X-Requested-With,Content-Type,Accept,"
          + "content-Type,origin,x-requested-with,content-type,accept,authorization,token,id,X-Custom-Header,X-Cookie,Connection,User-Agent,Cookie,*");//允许哪些头