vue+axios+ssm解决跨域问题

环境

1.vue-admin-template模板

2.axios

3.后端java

跨域问题

解决方案

注意：配置了前端解决方案后端可以不用配置，反之后端配置了前端可以不用配置

前端解决方案

前端采用代理的方式直接进入后端

vue.config.js文件

在module.exports中找到devServer完成如下配置
devServer: {
    port: port,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',    //后端端口
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
}

图片如下：

配置axios

import Axios from "axios";

const ins = Axios.create({
    baseURL: '/',     //这里配置'/' 这样后续请求就不会带额外地址
    // timeout: 3000
})

baseURL:'/' 如图

baseURL:'/api' 若在这里加了api

我的axios.js配置如下，其他方法以及拦截器不附图

后端java解决方案

我是在拦截器中配置，给浏览器返回允许跨域的信息

//在拦截器中设置允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers","*");
response.setHeader("Access-Control-Allow-Methods","*");
response.setHeader("Access-Control-Allow-Credentials","true");
response.setHeader("Access-Control-Max-Age","3600");

总结

最近做项目，本来想用模板做前端，后端处理逻辑就行了，懒得写前端，谁知道越陷越深，然后一边学一边用。跨域这个问题我挠头了一下午，有人说是后端java要配置全局跨域，有人说是注解问题，最后问了群里大神解决了这个问题！感谢群里大神，我们在前端直接配置代理，那么我们等于直接访问了后端。后来又找到从后端解决跨域的方法，只需要在拦截器中设置允许跨域即可。好了，拿下！