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

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

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步一步也不能少,谨记



相关文章
|
6天前
|
前端开发 JavaScript Java
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
15 1
|
3月前
|
缓存 JavaScript 搜索推荐
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
71 2
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
49 0
|
3月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
241 4
|
3月前
|
资源调度 JavaScript
|
5月前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
5月前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
|
4月前
|
JavaScript 前端开发 开发者
vue中使用axios请求post接口,请求会发送两次
vue中使用axios请求post接口,请求会发送两次