VueCli4项目配置反向代理proxy的方法步骤

 更新时间:2020年05月17日 08:40:06   作者:夜空中最亮的星  
这篇文章主要介绍了VueCli4项目配置反向代理proxy的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

Vue Cli4创建项目之后,没有配置vue.config.js,如果直接发起axios请求,可能会引起跨域问题.

以豆瓣电影首页的最近热门 为例:

axios({
  method: "get",
  url: "https://movie.douban.com/j/search_subjects",
  params: {
  type: "movie",
  tag: "热门",
  page_limit: 50,
  page_start: 0
  }
 }).then(res => {
  console.log(res.data);
 });

如果直接发起请求必然会引起跨域错误,只需要在项目根目录手动创建vue.config.js文件:

module.exports = {
 devServer: {
 proxy: {
  "/j": {
  target: "https://movie.douban.com",
  changeOrigin: true
  }
 }
 }
};

然后修改axios请求的url地址:

url:"/j/search_subjects"

最后 重启该项目 重启该项目 重启该项目 即可

到此这篇关于VueCli4项目配置反向代理proxy的方法步骤的文章就介绍到这了,更多相关VueCli4反向代理proxy内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue print.js打印支持Echarts图表操作

    vue print.js打印支持Echarts图表操作

    这篇文章主要介绍了vue print.js打印支持Echarts图表操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 优选七个用于vue开发的JS库

    优选七个用于vue开发的JS库

    这篇文章主要介绍了JavaScript优选七个用于vue开发库,借助开源库加速Vue项目的开发进度是现代前端开发比较常见的方式,平常收集一些JavaScript库介绍,在遇到需要的时候可以信手拈来
    2023-02-02
  • Vue项目安装插件并保存

    Vue项目安装插件并保存

    今天小编就为大家分享一篇关于Vue项目安装插件并保存,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • vue中使用jwt-decode解析token的方法

    vue中使用jwt-decode解析token的方法

    这篇文章主要介绍了vue中使用jwt-decode解析token,文末给大家补充介绍了vue通过jwt-decode解析token获取需要的数据,本文给大家介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • Vue使用百度地图实现城市定位

    Vue使用百度地图实现城市定位

    这篇文章主要为大家详细介绍了Vue使用百度地图实现城市定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 前端本地存储方案localForage在vue3中使用方法

    前端本地存储方案localForage在vue3中使用方法

    localForage是前端本地存储的库,支持多种存储后端,并提供了一致的API来存储和检索数据,这篇文章主要给大家介绍了关于前端本地存储方案localForage在vue3中使用的相关资料,需要的朋友可以参考下
    2024-09-09
  • 浅析vue 函数配置项watch及函数 $watch 源码分享

    浅析vue 函数配置项watch及函数 $watch 源码分享

    这篇文章主要介绍了vue 函数配置项watch及函数 $watch 源码分享 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • 浅析Vue3如何实现页面访问拦截

    浅析Vue3如何实现页面访问拦截

    在Vue3中,页面访问拦截(Navigation Guards)是一种常见的路由控制机制,那么Vue3具体是如何实现这一功能的呢,下面就跟随小编一起来学习一下吧
    2024-03-03
  • Vuex数据持久化实现的思路与代码

    Vuex数据持久化实现的思路与代码

    Vuex数据持久化可以很好的解决全局状态管理,当刷新后数据会消失,这是我们不愿意看到的。这篇文章主要给大家介绍了关于Vuex数据持久化实现的思路与代码,需要的朋友可以参考下
    2021-05-05
  • vue项目history模式刷新404问题解决办法

    vue项目history模式刷新404问题解决办法

    这篇文章主要给大家介绍了关于vue项目history模式刷新404问题的解决办法,需要的朋友可以参考下
    2023-11-11

最新评论