在vue-cil3中配置多个代理url，解决项目运行时跨域问题

最新推荐文章于 2024-09-29 10:33:26 发布

张婷张婷呀

最新推荐文章于 2024-09-29 10:33:26 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_42326052/article/details/112285514

本文介绍如何在Vue CLI3项目中通过创建vue.config.js文件，配置多个代理URL来解决开发过程中遇到的跨域问题。只需在根目录新建vue.config.js并设置代理配置，然后重启项目，配置即可生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在项目的根目录下新建vue.config.js

在这里插入图片描述

配置代理信息

//想要代理的目标地址
const targetUrl=`http://47.101.140.48:9533`
const wxUrl=`https://qyapi.weixin.qq.com`
//需要代理的api的匹配路径列表
const     proxyTable= {
   
   
  '/mdata': {

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

张婷张婷呀

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue/cli 3 配置多个代理服务器

danby2的博客

01-19

6411

在与src同级目录新建vue.config.js vue.config.js module.exports = { publicPath: '/', outputDir: 'dist', assetsDir: 'static', filenameHashing: true, devServer: { open: tr...

Apache设置反向代理

热门推荐

zhangrouzhu的博客

07-10

5万+

Apache安装省略。　一、配置http反向代理地址1、首先确保Apache有这些模块，在Apache根目录下确认有这些模块，主要包含以下模块：mod_proxy.somod_proxy_ajp.somod_proxy_balancer.somod_proxy_connect.somod_proxy_http.so 然后打开配置conf/httpd.conf文件，将这些模块的注释去除，如下图所示：...

2 条评论您还未登录，请先登录后发表或查看评论

关于vue cli 3.0 脚手架中多个公共地址的接口url 及aoxis 封装调用

冲锋

11-27

9979

最近新开一个项目，也是紧急搭了项目架子，做了下封装及分目录，但这回也是发现了一个问题，公共接口地址有多个，简单说下公司的后台，这边后台的接口地址是按模块划分的，常规模式下，后台会给一个公共的接口地址，比如测试的时候公共地址是http:ailisi.cn，但后台在这个公共基础上把项目又具体的划分了member，infors ，pay，ticket，lottery 模块，也就是说现在的接口地址需要在h...

Vue3.x 中 vue.config 配置 Webpack-dev-server的proxy 实现代理跨域

hfdxmz_3的博客

04-22

441

Vue3.x 中 vue.config 配置 Webpack-dev-server的proxy 实现代理跨域前言 1.如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求，那么代理某些 URL 会很有用。 2.解决开发环境的跨域问题(不用在去配置nginx和host, 爽歪歪~~) 在webpack.config.js中配置下面简单介绍一下五个经常使用的场景使用一:...

vue3 二级路由-内嵌外链解决方案(iframe)

qq_28805447的博客

10-28

5075

vue3 二级路由-内嵌外链解决方案(iframe)

vue引入外部URL链接

Chona

02-28

4663

vue使用v-html引入外部URl链接

webpack+vue-cil 中proxyTable配置接口地址代理操作

11-20

综上所述，`proxyTable`是webpack和vue-cli结合使用时解决跨域问题的一个重要配置，它使得开发者能够在本地进行API接口的联调，无需担心跨域问题，提高了开发效率。理解并正确使用`proxyTable`，对于进行前端开发来...

webpack+vue-cil中proxyTable处理跨域的方法

10-18

在webpack和vue-cli的项目中，通常会选择webpack-dev-server的proxyTable或者vue-cli提供的代理配置功能来解决跨域问题，因为这些方法配置简单，能够快速的让开发过程中的接口调用无障碍。通过这种方式，开发者...

vue项目中显示第三方外部链接的页面

韩旭不会敲代码吧的博客

04-25

6354

vue项目中显示第三方外部链接的页面

vue跨域处理+多个环境下使用

qq_40606563的博客

06-21

872

vue处理跨域并且多环境下配置

Vue配置文件中的proxy中配置多个接口地址

qq_58638897的博客

11-02

3252

Vue配置文件中的proxy中配置多个接口地址

Vue3配置多级代理

一个一直在努力的前端小白，在为了成为全栈程序员的道路上加油！

08-21

1138

在Vue3项目中，我们可以通过修改 vue.conig.js或者vue.conig.ts 文件来配置多个proxy。下面是一个示例的 vue.config.ts 文件，我分别设置了两个不同的请求地址，分别用于处理不同的请求。

vue3+vite代理配置

yy869949908的博客

09-20

4012

前端项目上线前，运行在本地，无法跨域请求到服务器接口。

vue项目配置多个Proxy代理

weixin_39964419的博客

11-29

1万+

vue项目如何配置多个Proxy代理

VUE3跨域方案：配置代理

qq_41760984的博客

12-15

7600

vue3、跨域、axios、TS项目

vue3跨域请求及一些常用配置

weixin_42371812的博客

01-22

7785

3、上面两步都完成后，我们就可以正常来请求我们的接口了。当然，为了以后更方便的维护自己的代码，业内也一般会有一个规范（当然，也不是一定得这样）。在使用vue3开发的时候，总免不了做一些基础的配置。接下来，我就做一些自己在在开发中所运用到一些常用配置。其实，对于跨域配置，我之前的博文中也有说过，在这儿我也就大概再讲一次。目录（其实文件夹的名字可以随意，但为了规范【网上也是多是这样子的名字】），之后在该目录下新建一个。文件中配置，网上有说这个文件不能配置，经测试，也没啥毛病。，再在api目录下新建一个。

Vue3 proxy跨域代理