nuxt配置實現axios在開發時的跨域代理
阿新 • • 發佈:2018-12-21
最近在使用nuxt搭建專案遇到跨域的問題,這裡記錄下nuxt配置實現axios代理,解決跨域的問題。
一、用nuxt提供的模板搭建專案時已經安裝了axios,接下來在 nuxt.config.js裡進行配置,如下:
module.exports = { modules: [ '@nuxtjs/axios', ], axios: { proxy: true, prefix: '/api', // baseURL credentials: true, }, proxy: { '/api': { target: 'http://192.168.xxx.xxx:xxxx', // 代理地址 changeOrigin: true, pathRewrite: { '^/api': '', //將 /api 替換掉 }, }, } }
其中, axios裡的 prefix 是設定介面字首,沒有字首可以去掉。
二、如果需要額外配置 axios,可以通過 plugins 來進行配置。在 /plugins 目錄下增加 axios.js ,並引進配置檔案。 如下:
module.exports = {
plugins: [
{ src: '~/plugins/axios' }
],
}
三、在 axios.js 檔案裡就可以進行配置了,如下:
import Qs from 'qs'; export default function (app) { let axios = app.$axios; // 基本配置 axios.defaults.timeout = 10000; axios.defaults.method = 'post'; // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; axios.defaults.headers = {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, axios.defaults.transformRequest = [function (data) { data = Qs.stringify(data) return data }], // 請求回撥 axios.onRequest(config => {}) // 返回回撥 axios.onResponse(res => {}) // 錯誤回撥 axios.onError(error => {}) };
四、在頁面裡我們就可以這樣引用:
this.$axios({
url: '/api/login',
data: {
username: '哈哈哈',
password: '123'
}
}).then(res => {
console.log('res: ', res)
});