前端localhost调用本地localhost后端接口时的跨域问题
目录
前端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）