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



相关文章
|
9天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 "ERROR Invalid options in vue.config.js: ‘server’ is not allowed" 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
24 1
|
11天前
|
JavaScript 安全 前端开发
vue怎么处理跨域,原理?
vue怎么处理跨域,原理?
18 2
|
22天前
|
前端开发 JavaScript
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
|
24天前
|
前端开发 Java Spring
axios跨域请求解决,使用注解解决
axios跨域请求解决,使用注解解决
|
1月前
|
JavaScript 应用服务中间件 nginx
vue中404解决方法
vue中404解决方法
8 0
|
1月前
|
JavaScript 前端开发 API
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
23 2
|
1月前
|
JavaScript 应用服务中间件 nginx
vue中404解决方法
vue中404解决方法
|
1月前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
65 0
|
1月前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
1月前
|
JSON 前端开发 JavaScript
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
54 0