关于vue项目中axios跨域的解决方法(开发环境)

1,838 阅读1分钟

1、在config文件中修改index.js

    proxyTable: {
      "/api":{
        target: 'https://www.baidu.com/muc/',//你需要跨域的url
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    },

2、在config文件中修改dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST:'/api/' //开发环境中加上这段关键,不然出错
})

3、在config文件中修改prod.env.js

module.exports = {
  NODE_ENV: '"production"',
  API_HOST: 'https://www.baidu.com/muc/'//生产环境中加上这段关键,不然出错
}

4、在你请求的端口之前加上

        this.$axios
          .get([
            '/api/captch/sent?phone' //这里需要在你请求的端口之前加上/api/.
          ])
          .then(response => {
            // success
           
          })
          .catch(error => {
            // error
            console.log(error)
          })

总结: 这4步一步也不能少,谨记


欢迎关注我的公众号「前端历劫之路」 ​

回复关键词电子书,即可获取近12本前端热门电子书。 ​

回复关键词红宝书第4版,即可获取最新《JavaScript高级程序设计》(第四版)电子书。 ​

你还可以加我微信,我拉拢了很多IT大佬,创建了一个技术交流、文章分享群,欢迎你的加入。 ​

  • 作者:Vam的金豆之路

  • 主要领域:前端开发

  • 我的微信:maomin9761

  • 微信公众号:前端历劫之路