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



相关文章
|
14天前
|
JSON 数据可视化 数据库
vue3+threejs+koa可视化项目——实现登录注册(第三步)
vue3+threejs+koa可视化项目——实现登录注册(第三步)
40 5
|
14天前
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
64 3
|
14天前
|
JavaScript 数据可视化 算法
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
35 6
|
1天前
|
JavaScript
vue项目切换页面白屏的解决方案
vue项目切换页面白屏的解决方案
5 0
|
1天前
|
XML JavaScript 前端开发
Vue3 项目中怎么使用 jsx——易懂
Vue3 项目中怎么使用 jsx——易懂
5 0
|
1天前
|
JavaScript 应用服务中间件 nginx
vue中404解决方法
vue中404解决方法
3 0
|
2天前
|
缓存 JavaScript API
一些常见的Vue项目性能优化策略
Vue项目性能优化包括代码分割、懒加载以减少初次加载时间;利用计算属性和侦听器处理复杂逻辑;优化v-for,使用key属性;减少DOM操作;借助Vue Devtools分析性能;图片优化如使用WebP格式和懒加载;异步加载组件;精简第三方库和插件;考虑服务端渲染或预渲染;以及优化网络请求,如合并请求和利用缓存。实际应用中,需根据项目需求选择合适策略。
12 2
|
4天前
|
JavaScript 前端开发 API
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
13 2
|
11天前
|
JavaScript 应用服务中间件 nginx
vue中404解决方法
vue中404解决方法
|
14天前
|
JSON 数据可视化 前端开发
vue3+threejs+koa可视化项目——模型文件上传(第四步)
vue3+threejs+koa可视化项目——模型文件上传(第四步)
17 7