vue+axios跨域问题

环境

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要配置全局跨域，有人说是注解问题，最后问了群里大神解决了这个问题！感谢群里大神，我们在前端直接配置代理，那么我们等于直接访问了后端，好了，拿下！