跨域問題在開發(fā)中，是一個常見的問題。解決方案可以在前端處理也可以在后端解決，本教程為在前端處理。
本教程講解的為vue3腳手架搭建的項目遇到的跨域問題，其他版本也同理。
1.在項目根目錄新建vue.config.js文件
module.exports = {
? ? devServer: {
? ? ? ? // 設(shè)置代理
? ? ? ? proxy: {
? ? ? ? ? ? "/api": {
? ? ? ? ? ? ? ? target: "http://m.kugou.com/", // 訪問數(shù)據(jù)的計算機(jī)域名
? ? ? ? ? ? ? ? ws: true, // 是否啟用websockets
? ? ? ? ? ? ? ? changOrigin: true, //開啟代理
? ? ? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? ? ? ? '^/api': '/'//這里理解成用‘/api’代替target里面的地址，后面組件中我們掉接口時直接用api代替 比如我要調(diào)用'http://m.kugou.com/rank/info'，直接寫‘/api/rank/info’即可?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
};
2.本項目使用axios來請求，所以需要在main.js中引入該插件和配置
import axios from 'axios';
Vue.prototype.$axios = axios;
import QS from 'qs'
Vue.prototype.qs = QS;
axios.defaults.timeout = 5000;? ? ? ? ? ? ? ? ? ? ? ? //響應(yīng)時間
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';? ? ? ? //配置請求頭
3.頁面中使用
created() {
? ? axios.get("/api/test/jeecgDemo/list").then(data => {
? ? ? console.log(data);
? ? });
? }
