问题:

解决方法:
vue项目中做如下修改:
1.在vue.config.js的devServer:中增加代码:
devServer: {
host: "0.0.0.0",
port: 8080,
open: false, // 运行是否自动打开浏览器
proxy: {
// 反向代理解决跨域
['/api']: {
target: 'http://localhost:8083', // 后端接口地址
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
},
},
},
2.在vue项目中,src的utils包中的request.js里增加
import axios from 'axios';
import { useUserStore } from '@/store/modules/user';
axios.defaults.withCredentials = true //Cookie跨域
// 创建axios实例
const service = axios.create({
baseURL: 'http://localhost:8080',
timeout: 50000,
headers: { 'Content-Type': 'application/json;charset=utf-8' },
withCredentials:true // 设置携带cookie
});
3.对api包中的每个.js文件修改,将后端的接口url在原来的基础上增加/api,例如:
请求的url是“/Chosepro”写为“/api/Chosepro”
export function getProjectListApi() {
return request({
url: '/api/Chosepro',
method: 'get',
});
}
本文介绍了在Vue项目中通过修改vue.config.js的devServer设置进行反向代理解决跨域问题,同时在axios配置文件中添加withCredentials以允许Cookie跨域,并更新API接口URL的方法。

2258

被折叠的 条评论
为什么被折叠?



