nuxt使用axios的跨域处理配置

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

 

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);
  });
}

 

nuxt.config.js


  plugins: [
    { src: "~plugins/axios.js", ssr: true },
  ],
  //处理跨域问题
  modules: ["@nuxtjs/axios", "@nuxtjs/proxy"],
  axios: {
    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://192.168.1.2:10086/v1",
      pathRewrite: { "^/api/": "" }
    }
  }

 

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

 

 

其他方案参考:

https://segmentfault.com/a/1190000010815403

https://segmentfault.com/a/1190000012550346

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值