vite中server.proxy的一些配置

这篇具有很好参考价值的文章主要介绍了vite中server.proxy的一些配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  • target是目标代理的接口地址,当监测到以 /api开头的接口后,把axios请求中前面的本地服务器地址改为target的值,实际发送给后端的请求就是下方后一个请求

         http://XX.XX.XX.XX:8080/api/def --> http://localhost:8081/api/def

  • changeOrigin表示是否跨域

  • PathRewrite:替换请求中匹配的内容,在这里就是去掉 /api 前面的 ^

server:{
    proxy:{
      '/api':{
        target:"http://localhost:8081",  //目标代理接口地址
        secure:false,
        changeOrigin:true,  //开启代理,在本地创建一个虚拟服务器
        PathRewrite:{
          '^/api':'/api'
        }
      }
    }
}

vite配置的server.proxy其实和vue-cli配置的devServer.proxy大致一样

附上vite官网的server.proxy链接:

https://cn.vitejs.dev/config/server-options.html#server-proxy文章来源地址https://www.toymoban.com/news/detail-799202.html

到了这里,关于vite中server.proxy的一些配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue.config.js中proxy配置

    这里以axios发请求为例 如果发送的请求都以 /abc 开头,那么我们就可以在proxy中进行服务器代理配置。 3.代理多个接口 方法1:监测多个接口,可以在proxy中写多个配置:(适用于target不同的代理,相同也可以用这个方法,就是会麻烦一点,对于相同的target方法2会比较方便)

    2024年02月22日
    浏览(37)
  • vue.config.js 配置proxy代理

    方案一: 配置文件 文件内容 三个文件分别是三个不同环境使用的,如线上,线上测试,本地测试。我在本地测试时三个文件都配置成了一样。  vue.config.js 配置文件 问题: 控制台显示 400 (Bad Request)或404等问题都是 vue.config.js 配置文件 的 proxy 的配置问题。 主要检查点

    2024年03月15日
    浏览(31)
  • vue.config.js配置proxy代理解决跨越;proxy代理报404;

    像我们本地的vue项目运行起来,访问的地址一般是localhost,这个时候请求后台的接口,端口号也不一致,肯定就会存在跨域问题,所以我们要是想正常访问接口的话,就需要解决掉跨域问题。 本文我们是在vue.config.js配置proxy代理解决跨越:如果没有vue.config.js,就直接在项目

    2023年04月08日
    浏览(35)
  • vue3+vite中使用环境变量 .env 的一些配置情况说明

    在项目文件中新建文件.env .env.pro 两个文件其中.env 是默认设置 .env.pro 为正式环境设置 1、设置.env中的内容信息 注意vue3+vite 必须使用VITE开头的配置信息 否则无法获取 如果不想使用VITE开头自己修改就在vite.config.ts文件中添加envPrefix:“APP_” 2、在 vite 中使用环境变量,可以用

    2024年02月04日
    浏览(42)
  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(42)
  • Vue+vite创建项目关于vite.config.js文件的配置

    Vue项目创建时,我们见过vue-cli 创建项目和webpack 创建项目等方式。 现在Vue 3版本使用npm/pnpm create vue@latest 创建项目,是搭配使用vite工具构建的。 创建完成的项目,最明显的去别就是,项目配置文件命名不同,当然,配置语法也有不同。 vue-cli 创建的项目,项目配置文件文件

    2024年02月12日
    浏览(39)
  • Vite配置代理Proxy

    大家好,我是南木元元,热衷分享有趣实用的文章。今天来分享一下如何在vite中配置proxy代理来解决跨越问题。 跨域问题:浏览器从一个网页去请求另一个资源时,域名、端口、协议任一不同,都是跨域。 常用的解决跨域问题的方式有如下几种: jsonp:利用script标签可跨域

    2024年02月11日
    浏览(24)
  • vue中vite.config.js配置跨域以及环境配置详解

    我们的 .env.development 和 .env.production 文件里面都会有 VITE_APP_ENV 配置: 在我们的 vite.config.js文件中: 以上是 vite.config.js 的配置,上面展示了在不同环境下去请求对应环境的域名并且配置代理进行跨域. 1.在vue.config.js中设置一下代码: 2. 创建axioss实例时,将baseUrl设置为 \\\'/api\\\'

    2024年02月15日
    浏览(36)
  • Vite 配置代理 Proxy,解决跨域

    我们在编写前端项目的时候,经常会遇到跨域的问题,当我们访问后端 API 的 URL 路径时,只要域名、端口或访问协议(如 HTTP 和 HTTPS)有一项不同,就会被浏览器认定为跨域。另外我们也会经常重复编写后端的域名,例如  https://example.com/api/some_end_point , https://example.com/ap

    2024年02月16日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包