跨域问题在开发中,是一个常见的问题。解决方案可以在前端处理也可以在后端解决,本教程为在前端处理。
本教程讲解的为vue3脚手架搭建的项目遇到的跨域问题,其他版本也同理。
1.在项目根目录新建vue.config.js文件
vue.config.jsmodule.exports = {
devServer: {
// 设置代理
proxy: {
"/api": {
target: "http://m.kugou.com/", // 访问数据的计算机域名
ws: true, // 是否启用websockets
changOrigin: true, //开启代理
pathRewrite: {
'^/api': '/'//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://m.kugou.com/rank/info',直接写‘/api/rank/info’即可
}
}
}
}
};
2.本项目使用axios来请求,所以需要在main.js中引入该插件和配置
main.jsimport axios from 'axios';
Vue.prototype.$axios = axios;
import QS from 'qs'
Vue.prototype.qs = QS;
axios.defaults.timeout = 5000; //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //配置请求头
3.页面中使用
demo.vuecreated() {
axios.get("/api/test/jeecgDemo/list").then(data => {
console.log(data);
});
}
网友评论