Vue后台管理系统项目前端解决跨域问题

Ester ·
更新时间:2024-09-21
· 857 次阅读

在开发中由于前后端服务器不一致,就有了跨域问题

解决办法:使用proxy (开发环境)

在项目目录下的vue.config.js文件中配置:

module.exports = { publicPath: "./", //配置打包之后的相对路径 devServer: { proxy: { //这里可以配置代理 "/api": { target: "http://api.focues.com", //这里写的是后台接口的域名和端口号 ws: true, //启用websockets changeOrigin: true, //开启代理 pathRewrite: { // 重命名 "^/api": "/" } } } } 然后使用/api/代替你原本的服务器端的baseUrl 在发送请求时 axios({ url: '/api/login.action', method: 'post', params: { loginName:username,password: password } }).then(res => { var str = res.data; sessionStorage.setItem('loginName',username) sessionStorage.setItem('user',username) this.$router.replace({name: 'Menu', params: {loginName: username,password:password}}) }).catch(err => { console.log(err.data) }) 正式环境

在main.js文件中配置

axios.defaults.baseURL='http://***/***';
作者:sunlulu66



VUE vue后台 跨域 系统 前端

需要 登录 后方可回复, 如果你还没有账号请 注册新账号