Vue cli axios獲取資料中的跨域問題

2021-08-21 04:38:39 字數 1895 閱讀 9716

我之前的部落格已將講了使用axios,現在我們拉看一看如何實現跨域

我們這裡還是使用vue-cli 2.x版本

加入本地localhost訪問介面會抱跨域的錯誤。

其實開發的話在webpack配置一下proxytable就ok了,如下

在 config / index.js

dev: 

}},

在生產production和開發development兩種環境分別測試,在config/dev.env.js和prod.env.js裡也就是開發/生產環境下分別配置一下請求的位址api_host,開發環境中我們用上面配置的**位址api,生產環境下用正常的介面位址,所以這樣配置:

在 config / dev.env.js

'use strict'

const merge = require('webpack-merge')

const prodenv = require('./prod.env')

module.exports = merge(prodenv, )

在 config / prod.env.js

'use strict'

module.exports =

上main我們已經在 dev 和 production 環境下分別設定的介面的路徑,接著我們就可以在axios的統一配置中引用了。

我之前的部落格使用axios,講到過關於axios的一些配置。

1.axios配置檔案中

引入 process.env.api_host,並作為get/post請求的baseurl

'use strict';

import axios from 'axios';

import qs from 'qs';

const url = process.env.api_host; // 當前環境的介面字首

// axios***的請求設定

axios.interceptors.request.use(config => `;

} return config;

}, err => );

// axios***的響應設定

axios.interceptors.response.use(response => , error => );

// 檢查http狀態碼返回是否正常

function

checkstatus

(response)

// 異常狀態下,把錯誤資訊返回去

return ;

}function

checkcode

(res)

if (res.data && (!res.data.success))

return res;

}// 請求方式的配置

export default

}).then(

(response) =>

).then(

(res) =>

);},

get(url, params)

}).then(

(response) =>

).then(

(res) =>

);}};

1.我們建立publicserver.js管理所有介面

export

const ajaxurl = ;

2.在頁面中引用,並使用

import  from

'../common/ajax/serverpublic';

get() );

}

分級獲取資料,跨級獲取資料

原始資料結構 市區 區縣 公司 裝置 需求 給定市的code碼,只要該市的所有公司資訊及公司裝置資訊。開幹!基本思路 1.給定市的code碼,獲取該市下面的所有區 縣,存入陣列 areacode 2.公司和裝置資訊通過關聯預載入一起載入,再使用巢狀查詢in,判斷是否在以上的陣列中。第一步 獲取市下面...

獲取網路資料

j2se實現網路的獲取 btn text 顯示網路 android layout width fill parent android layout height wrap content android text string btn text android id id showbtn andro...

struts jsp獲取資料

原文 感謝向值棧儲存資料 root valuestack vs actioncontext.getcontext getvaluestack push object obj 底層就是 root.add 0,obj 將資料儲存到棧頂。set string name,object obj 底層是將資料封...