用vuecli3開發(fā)遇到跨域問題洪灯,網上查一堆坎缭,說的都很復雜,這里簡單點說签钩。
假設我們在開發(fā)一個項目掏呼,我這邊寫好了頁面,同事寫好了服務器铅檩,給的測試接口是:
http://192.168.1.1:8080/mobile/operation/reportForm/recordingTime.json憎夷,那么跨域就是如下解決
1.1.在根目錄新建vue.config.js文件,文件內如下:
// // vue.config.js
module.exports = {
devServer: {
proxy: 'http://192.168.1.1:8080'//這里是你同事的域名昧旨,也就是另一臺電腦的域名拾给。
}
}
這個文件這樣的設置就基本可以滿足跨域問題祥得。
如果有更多需求可以參考這里:https://cli.vuejs.org/zh/config/#devserver-proxy
2.封裝axios,這里只是簡單的封裝一下蒋得,不封裝也行级及,直接調用如下:
//封裝http請求
import axios from "axios";
export default {
http(url, success) {
axios.get(
url
)
.then(function (response) {
success(response)
})
.catch(function (error) {
// eslint-disable-next-line no-console
console.log(error);
});
}
}
3.直接在應用頁面調用。
import Http from "./../unit/testHttp.js";
export default {
components: {},
data() {
return {
isLoading: true
};
},
created() {
this.getData();
},
methods: {
//獲取數據
getData() {
const self = this;
//這里就把后面的地址加上就行啦
const url = "/mobile/operation/reportForm/recordingTime.json";
const success = function(response) {
const status = response.status;
if (status == 200) {
self.data = response.data;
} else {
console.log("獲取失敗");
}
};
Http.http(url, success);
},