最近在使用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)
});