nuxt nuxt.config.js 配置跨域问题

1/安装基本配置:

npm i axios qs
npm i @nuxtjs/axios @nuxtjs/proxy --save-dev

2/plugins/axios.js 使用qs将请求从参数转化位字符串 

import qs from "qs";
export default function({ $axios, redirect }) {
  $axios.onRequest(config => {
    config.data = qs.stringify(config.data, {
      allowDots: true //Option allowDots can be used to enable dot notation
    });
    return config;
  });
 
  $axios.onResponse(response => {
    return Promise.resolve(response.data);
  });
 
  $axios.onError(error => {
    return Promise.reject(error);
  });
}

或者

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 => {})
}

3/配置nuxt.config.js 

module.exports = {
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/element-ui',
    { src: "~plugins/axios.js", ssr: true }
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    //"@nuxtjs/proxy"
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
    //是否允许跨域
    proxy: true,
    //最多重发三次
    retry: { retries: 3 },
    //开发模式下开启debug
    debug: process.env._ENV == "production" ? false : true,
    //设置不同环境的请求地址
    baseURL:
      process.env._ENV == "production"
        ? "http://localhost:3000/api"
        : "http://localhost:3000/api",
        //是否是可信任
    withCredentials: true
  },
  proxy: {
    "/api":{
      target:'http://www.baidu.com',
      pathRewrite:{"^/api":''}
    }

  },
  /*
  ** Build configuration
  */
  build: {
    transpile: [/^element-ui/],
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }
}

4/在页面使用this.$axios做请求

 this.$axios.post('/api/login',{
              mobile: 13211122233,
              pwd: 652545
   })
   .then((res) => {
      console.log(res)
   }).catch(()=>{
        console.log('eeee')
  })

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

短暂又灿烂的

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值