脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue前端代理跨域问题

vue中前端代理跨域问题实例总结

 更新时间：2022年04月07日 14:34:42   作者：Aasee.  
前后端分离进行项目开发,跨域问题不可避免,下面这篇文章主要给大家介绍了关于vue中前端代理跨域问题的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

前言

这几天在学习vue进行前后端交互时出现了跨域问题，也是经历查文章查文档和自己实践总结才最终解决。这篇文章就对此进行总结，以防忘记，同时也希望能对正在经历该问题困扰的同学们有所帮助。注意：这里讲解的是vue2.x版本的方法！

第一

首先我们需要先确定我们所使用的接口名，我这里使用的自己Java后端的接口和python后端的接口

http://localhost:8081/articles/findArticlePage
http://127.0.0.1:5000//api/tryChat

可以看到我这里使用了两个不同的端口，所有可以说基本可以满足大多数人的需求了。

在main.js文件中定义全局变量axios

Vue.prototype.$axios = axios

第二

我们通过我们所需调用的接口去改写config文件夹中的index.js文件

以我的为例子，先找到proxyTable，我们需要在这里去修改我们需要配置的跨域代理。

以我需要的接口为例进行配置代理，大家可以仿照我的例子来改。

重写请求地址那里大家如果是和我一样进行命名的话设不设置为空都差不多。

可以看到我是根据接口的地址来写这个配置的名称的，这样不容易出错，血的教训不然弄半天都还是不成功。

至于在dev.env.js文件和prod.env.js文件的配置如下，我试了不配重启vue项目也没问题依旧可以实现跨域。具体为啥没有深入研究，各位大大佬有知道的也可以指点一二。

dev.env.js

prod.env.js

第三

接下来就可以去对后端进行请求了，这是我写的例子。

这里只是总结跨域的书写与经验，其他就不过多展示了。这样一套操作下来基本就解决了大多数人的需求了，我也是试了很多次才实现的，我看网上大多的教程都很死板的，遂自我总结一下我的经验和方法。我自己觉得最好是取得名字和接口中的有所对应比较容易成功。

代码

当然啦，我还是准备了一下代码让大家可以直接cv ，方便快捷

'/articles': {
                // websocket
                ws: false,
                // 目标地址
                target: 'http://localhost:8081/',
                //发送请求头host会被设置target
                changeOrigin: true,
                // 重写请求地址
                pathReWrite: {
                  '^/articles': '/articles'
                }
              },
              
              // prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  api: '"//127.0.0.1:5000/"',
  articles:'"//localhost:8081/"',
  }
  
			// dev.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  api: '"/api/"',
  articles: '"/articles/"'
})

好了，总结完毕，大家如果出现其他问题或者还是没看太懂的也可以问我，我一定会尽力解答，当然前提是我懂。

总结

到此这篇关于vue中前端代理跨域问题的文章就介绍到这了,更多相关vue前端代理跨域问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue (Vuex)中 store 基本用法

    Vue (Vuex)中 store 基本用法

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，这篇文章主要介绍了Vue 中 store 基本用法,需要的朋友可以参考下
    2023-01-01
  • vue如何实现关闭对话框后刷新列表

    vue如何实现关闭对话框后刷新列表

    这篇文章主要介绍了vue如何实现关闭对话框后刷新列表，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue实现高德坐标转GPS坐标功能的示例详解

    Vue实现高德坐标转GPS坐标功能的示例详解

    生活中常用的几种坐标有：WGS-84、GCJ-02与BD-09。本文将利用Vue实现高德坐标转GPS坐标功能，即实现GCJ-02坐标转换成WGS-84坐标，需要的可以参考一下
    2022-04-04
  • vue-calendar-component日历组件报错Clock is not defined解决

    vue-calendar-component日历组件报错Clock is not defi

    这篇文章主要为大家介绍了vue-calendar-component日历组件报错Clock is not defined解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • Vue3 封装一个支持输入和单/多选InputSelect组件-Antd详解

    Vue3 封装一个支持输入和单/多选InputSelect组件-Antd详解

    Antd的Select组件默认不支持作为输入框使用或手动添加选项,为了实现这一功能,我们封装了一个通用组件,支持单选和多选模式,并允许用户在组件失焦时手动输入选项,主要通过定义searchText存储输入数据,感兴趣的朋友跟随小编一起看看吧
    2024-09-09
  • Vue3之Mixin的使用方式(全局,局部,setup内部使用)

    Vue3之Mixin的使用方式(全局,局部,setup内部使用)

    这篇文章主要介绍了Vue3之Mixin的使用方式(全局,局部,setup内部使用),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 基于javascript的拖拽类封装详解

    基于javascript的拖拽类封装详解

    这篇文章主要介绍了基于javascript的拖拽类封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue再次进入页面不会再次调用接口请求问题

    vue再次进入页面不会再次调用接口请求问题

    这篇文章主要介绍了vue再次进入页面不会再次调用接口请求问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • vue之this.$router.push页面刷新问题

    vue之this.$router.push页面刷新问题

    这篇文章主要介绍了vue之this.$router.push页面刷新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • vue2.0+vue-dplayer实现hls播放的示例

    vue2.0+vue-dplayer实现hls播放的示例

    这篇文章主要介绍了vue2.0+vue-dplayer实现hls播放的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03

最新评论