vue cli3 簡單解決跨域問題 2019.4.30

用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);
    },
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末窄锅,一起剝皮案震驚了整個濱河市创千,隨后出現的幾起案子缰雇,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,324評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件低葫,死亡現場離奇詭異怜森,居然都是意外死亡,警方通過查閱死者的電腦和手機暇咆,發(fā)現死者居然都...
    沈念sama閱讀 92,356評論 3 392
  • 文/潘曉璐 我一進店門锋爪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人爸业,你說我怎么就攤上這事其骄。” “怎么了扯旷?”我有些...
    開封第一講書人閱讀 162,328評論 0 353
  • 文/不壞的土叔 我叫張陵拯爽,是天一觀的道長。 經常有香客問我钧忽,道長毯炮,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,147評論 1 292
  • 正文 為了忘掉前任耸黑,我火速辦了婚禮桃煎,結果婚禮上,老公的妹妹穿的比我還像新娘大刊。我一直安慰自己为迈,他們只是感情好,可當我...
    茶點故事閱讀 67,160評論 6 388
  • 文/花漫 我一把揭開白布缺菌。 她就那樣靜靜地躺著葫辐,像睡著了一般。 火紅的嫁衣襯著肌膚如雪男翰。 梳的紋絲不亂的頭發(fā)上另患,一...
    開封第一講書人閱讀 51,115評論 1 296
  • 那天,我揣著相機與錄音蛾绎,去河邊找鬼昆箕。 笑死鸦列,一個胖子當著我的面吹牛,可吹牛的內容都是我干的鹏倘。 我是一名探鬼主播薯嗤,決...
    沈念sama閱讀 40,025評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼纤泵!你這毒婦竟也來了骆姐?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,867評論 0 274
  • 序言:老撾萬榮一對情侶失蹤捏题,失蹤者是張志新(化名)和其女友劉穎玻褪,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體公荧,經...
    沈念sama閱讀 45,307評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡带射,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,528評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了循狰。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片窟社。...
    茶點故事閱讀 39,688評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖绪钥,靈堂內的尸體忽然破棺而出灿里,到底是詐尸還是另有隱情,我是刑警寧澤程腹,帶...
    沈念sama閱讀 35,409評論 5 343
  • 正文 年R本政府宣布匣吊,位于F島的核電站,受9級特大地震影響跪楞,放射性物質發(fā)生泄漏缀去。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,001評論 3 325
  • 文/蒙蒙 一甸祭、第九天 我趴在偏房一處隱蔽的房頂上張望缕碎。 院中可真熱鬧,春花似錦池户、人聲如沸咏雌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,657評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽赊抖。三九已至,卻和暖如春寨典,著一層夾襖步出監(jiān)牢的瞬間氛雪,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,811評論 1 268
  • 我被黑心中介騙來泰國打工耸成, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留报亩,地道東北人浴鸿。 一個月前我還...
    沈念sama閱讀 47,685評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像弦追,于是被迫代替她去往敵國和親岳链。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,573評論 2 353

推薦閱讀更多精彩內容

  • ## 框架和庫的區(qū)別?> 框架(framework):一套完整的軟件設計架構和**解決方案**劲件。> > 庫(lib...
    Rui_bdad閱讀 2,906評論 1 4
  • vue-cli3項目搭建配置以及性能優(yōu)化 在之前的開發(fā)中主要用的是vue-cli2掸哑,最近空閑時間比較多,接下來有新...
    bayi_lzp閱讀 19,483評論 16 68
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴謹 對...
    cosWriter閱讀 11,096評論 1 32
  • 一零远、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用 css雪碧圖又叫css精靈或css sprite苗分,...
    饑人谷_羅偉恩閱讀 151評論 0 0
  • 隨著互聯網的發(fā)展俭嘁,自媒體的崛起,越來越多的個人品牌通過新媒體傳播服猪。 有幸自己也通過這些新媒介的傳播而獲得很多新穎而...
    地上飛的魚閱讀 213評論 0 0