vue实现proxy代理

于 2024-02-24 17:24:47 发布
阅读量364 收藏 9
点赞数 10
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongcao0/article/details/136273936
版权
本文介绍了如何在Vue项目的`vue.config.js`文件的devServer配置中设置proxy，以解决从`Vue_APP_BASE_API`环境变量指向的接口发起的跨域请求，同时启用`disableHostCheck`以绕过host检查。
摘要由CSDN通过智能技术生成

在vue.config.js中的devServer中添加如下代码

proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
悠闲的松鼠
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue cli3 配置proxy代理无效的解决
10-16
本文将详细解释如何正确配置Vue CLI 3的`proxy`代理，并解决配置无效的问题。 首先，打开`vue.config.js`文件，这个文件是Vue CLI 3自动生成的配置文件，用于定义项目的特定设置。如果没有这个文件，可以在项目根...
关于vue中proxy代理的七种使用场景配置
花姐夫JUN的博客
09-27 5794
在Vue中，代理（Proxy）是一种将请求转发到其他服务器的机制。它允许你在开发环境中通过一个中间层来处理网络请求，以解决跨域问题或将请求发送到不同的后端服务器。通过代理配置，你可以指定特定的URL路径，将其转发到不同的目标服务器。这在开发过程中特别有用，因为你可以将API请求代理到本地服务器或其他开发服务器，而无需直接连接到真实的后端服务器。devServer。
vue config.js proxy 代理使用记录
for_story的博客
12-21 2297
vue config.js proxy 代理使用记录 访问开发环境： proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { target: `http://192.168.2.37:8084`, changeOrigin: true, logLevel:'deb
vue-cli / ngnix 中配置websocket代理
记录点滴
11-20 6642
vue-cli中配置： 以下只适用于开发环境。 1/ 在devserver中配置如下： devServer: { host: '0.0.0.0', port: port, open: true, proxy: { // http代理 [process.env.VUE_APP_BASE_API]: { target: `http://localhost:8080`, // secure: false, // 如
vue本地前端调用服务器接口的代理设置
weixin_37472852的博客
11-13 1402
修改vue.config.js,主要代码如下： proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { // 访问路径，如‘dev-api’ target: `http://192.168.1.10:8080`, // 目标服务器ip和端口 changeOrigin: true, pat
在 vue.config.js 项目中配置 proxy 解决跨域问题
qq_40731473的博客
12-01 1499
首先我们在本地开发，域名都是 localhost ，当我们需要请求后台数据时，就会出现跨域的问题。 下面就是在 vue.config.js 配置文件里： devServer: { proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy '/api': { target: `http://10.24.4.214:8098/api`, changeOrigin:
vue中proxy配置及理解
jun999
07-08 1万+
今天被vue中proxy配置困扰了一天，记录一下。 项目中需要和两个不同的后台服务器接口进行响应，在开发过程中将第二个服务器接口默认写死了：http://www.beehub.paradeum.com/api/xxx 但是项目在生产环境中面临需要匹配https的情况，不能采用写死请求路径的情况，在项目大佬修改了大佬后终于成功了，代码及使用如下： vue.config.js proxy:{ //changexxx-api/login=>mock/login ...
Vue中如何实现proxy代理
12-10
Vue 框架开发的时候，会遇到跨域的问题，可在config/index.js 里配置proxyTable内容，使用proxy 代理。 // config/index.js 文件 proxyTable: { '/api': { target: 'http://192.168.149.90:8080/', // 设置你调用...
Vue使用Proxy代理后仍无法生效的解决
01-21
vue.js 配置了前端代理却未能生效 记录一下最近踩得小坑： 配置完代理后请一定重新执行（重要，非常重要！） npm run dev 若重新执行命令后，代理仍为生效，请按下方步骤进行检查： 检查index.js文件中的代理是否...
vue 实现cli3.0中使用proxy进行代理转发
10-16
总结来说，Vue CLI 3.0的`proxy`配置提供了一种简单的方法，帮助开发者在开发环境中绕过跨域限制，实现前端与后端API的本地联调。通过在`vue.config.js`中正确设置`proxy`，你可以将特定路径的请求转发到指定的...
vue proxy 的优势与使用场景实现
10-15
在 Vue 2.x 版本中，数据响应式主要是通过 `Object.defineProperty` 来实现的，而在 Vue 3.x 中，引入了 `proxy` 作为新的响应式系统的基础。这篇文章将深入探讨 `proxy` 的优势和使用场景，并通过实例对比 `proxy` ...
proxy 代理 配置
Just1like_this的博客
05-26 639
proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { target: http://localhost:8080, changeOrigin: true,//是否允许跨域请求 pathRewrite: { ‘^’ +/dev-api: ’ ’ } } }, /与多个/ 多个/会以一个/去找 / 表示网络路径引用 pathRewrite: { [’^’ + pro
vue的axios请求跨域处理
qq_35040085的博客
06-02 537
vue.config.js中。
vue-admin-template 修改登录接口
Yuudachi的博客
09-24 9040
准备工作 修改 vue.config.js proxy: { // change xxx-api/login => mock/login // detail: https://cli.vuejs.org/config/#devserver-proxy // 为了不影响其他请求的使用，可以将这里注释掉 /* [process.env.VUE_APP_BASE_API]: { target: `http://localhost:9000`,
Vue - Vue配置proxy代理，开发、测试、生产环境
MinggeQingchun的博客
11-26 2599
开发环境 .env.development。生产环境 .env.production。测试环境 .env.test。
Vue项目配置WebSocket连接{ws、wss 连接方式}配置
最新发布
HD243608836的博客
01-12 6845
这里target: 里边指向的都是后端server的地址 16000是我后端服务的端口 , 我这里websocket服务和普通的业务项目用的都是一个项目 所以都是16000端口。因为在本次测试的时候使用的是普通的ws方式连接 所以为了方便切换就写了两个websocket代理路由。env.development 文件和 .env.production 文件都加上这两行代码即可。前端websocket向后端发送数据使用方式。为什么要配置两个地址呢?
Ruoyi框架学习--Vue前端配置文件详解
qq_39367410的博客
09-16 3786
vue核心配置文件 main.js vue.config.js package.json 详解
ruoyi(若依)框架使用说明(前后端分离)
热门推荐
weixin_47534571的博客
10-27 6万+
@TOC 框架介绍 本身是一个优秀的简单的后台管理系统框架,前端(Vue,ElementUI),后端(Spring Boot、Spring Security、Redis & Jwt),本身可以直接拉下来直接使用.它的强大之处在于代码自动生成器的使用,可以根据数据库的表对应生成全套前后端代码,代码植入后可以直接使用,复杂业务只需在基础代码上进行修改增强即可.减少了重复代码的编写,提高了开发效率. 详情请访问:https://gitee.com/y_project/RuoYi-Vue 框架启动步骤 一.
Vue配置文件中的proxy配置
weixin_47437528的博客
04-14 1万+
1. vue的服务器代理配置参数详解 2. 代理多个接口的方法
vue的proxy代理,实现代码
05-26
Vue 的 Proxy 代理可以用于跨域请求，以下是一个简单的实现代码： ``` // 在 vue.config.js 中配置代理 module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', // 代理的目标地址 changeOrigin: true, // 是否跨域 pathRewrite: { '^/api': '' // 重写路径 } } } } } ``` 在上述代码中，我们使用了 `devServer` 对象来配置代理，其中 `proxy` 对象用于配置代理规则。在这个例子中，我们将所有以 `/api` 开头的请求都代理到了 `http://localhost:3000`，并且使用了 `changeOrigin: true` 来开启跨域请求。 当我们发送请求时，只需要将请求地址改为 `/api` 开头即可： ``` axios.get('/api/users') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悠闲的松鼠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值