前端localhost调用本地localhost后端接口时的跨域问题

在项目开发的初期，服务器还没有搭建起来时，使用Tomcat等工具在本地部署后端服务是非常常见的方案。同时，前后端都跑在本地localhost也可以有效的解决跨域问题。
但是，如果不进行一些配置，直接使用axios调用本地后端接口，就会出现类似如下的报错：

这是由于localhost端口号不同导致的不同源

解决方案：

Step1：在vue.config.js中配置proxy

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:端口号', // 配置好的后端接口地址
        // 允许跨域
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': '' // 以'/api'开头的url会进行接口转发
        }
      }
    }
  },
}

Step2：在main.js中配置axios

// 引入axios
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api' // 一定要设置 axios.defaults.baseURL 为proxy中的转发头

Step3：重启前端serve和Tomcat

重启Tomcat就是将tomcat服务关掉（sh ./shutdown.sh）后重新打开（sudo sh ./startup.sh）

上述步骤依次完成后，即可解决本地前端调用本地后端接口的跨域问题