nuxt.js 跨域配置proxy代理

100 篇文章 5 订阅
5 篇文章 0 订阅

1. 安装axios: npm install --save axios

2. 安装 @nuxtjs/axios和@nuxtjs/proxy来处理 axios 跨域问题:  npm i @nuxtjs/axios @nuxtjs/proxy -D

3. nuxt.config.js中配置:

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,

    headers: { 'Content-Type': 'application/json', 'crossDomain': true },

    timeout: 5000,

  },

  proxy: {

    '/api/': {

      target: 'http://192.168.1.53:3009/',

      pathRewrite: {

        '^/api/': ''

      }

    }

  }

4. 使用: 

async login({ commit }, { username, Pwd }) {

        try {

            const { data } = await axios.post('/API/User/Login', { username, Pwd })

            console.log('apidata:', data)

            commit('SET_USER', data)

        } catch (error) {

            if (error.response && error.response.status === 401) {

                throw new Error('Bad credentials')

            }

            console.log(error)

            throw error

        }

    },

推荐阅读:

学习Web前端 自学宝典

【uni-app】uniapp项目优化方式及建议

前端跨域设置 withCredentials: true

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

短暂又灿烂的

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

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

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

打赏作者

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

抵扣说明:

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

余额充值