Vite配置代理Proxy

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

前言

大家好,我是南木元元,热衷分享有趣实用的文章。今天来分享一下如何在vite中配置proxy代理来解决跨越问题。

什么是跨域问题

跨域问题:浏览器从一个网页去请求另一个资源时,域名、端口、协议任一不同,都是跨域。

常用解决方案

常用的解决跨域问题的方式有如下几种:

  • jsonp:利用script标签可跨域的特点,在跨域脚本中可以直接回调当前脚本的函数。
  • cors:服务器设置http响应头中的Access-Control-Allow-Origin值,解除跨域限制。
  • node中间件代理:启一个代理服务器,实现数据转发,利用了服务器向服务器请求无需遵循同源策略的原理。
  • nginx反向代理:实现原理类似于node中间件代理,通过nginx服务器来转发请求,正向代理和反向代理的区别主要在于正向代理中代理是客户端设置的,而反向代理中代理是服务端设置的。

vite proxy实现原理

Vite配置代理Proxy
vite配置proxy代理属于node中间件代理,简单来说,就是通过开启一个代理服务器,来充当一个中间层的角色,拦截前端发起的请求。代理服务器实际做的事:会在前端页面发起请求时,将请求转发到真实的后端服务器,然后响应给浏览器。利用服务器之间不存在同源策略限制的原理,整个过程通过代理服务器完成,浏览器是无感的,就会绕过浏览器的同源策略。

下面就来讲讲如何在Vite中配置proxy代理。

Vite中配置proxy代理

vite.config.ts配置

假如我现在想从本地请求后端的一个接口http://www.test.com/login ,应该怎样配置代理服务器呢?

参考Vite官网:server.proxy
Vite配置代理Proxy
在vite.config.ts中进行如下配置

server: {
  // http://localhost:5173/api/login -> http://www.test.com/login
  proxy: {
    //api是自行设置的请求前缀,任何请求路径以/api开头的请求将被代理到对应的target目标
    '/api': {
      target: http://www.test.com, //目标域名
      changeOrigin: true, //需要代理跨域
      rewrite: (path) => path.replace(/^\/api/, ''), //路径重写,把'/api'替换为''
    },
  },
},

配置代理后,会把当前请求http://localhost:5173/api/login代理到target中的地址http://www.test.com/api/login,并且通过路径重写,最终转发到http://www.test.com/login真实后端服务器,解决跨域问题。

在配置中使用环境变量

通常一个项目在开发过程中会有不同的环境,可以建立相应的.env文件,把需要的环境变量配置在其中。

如.env.development代表开发模式文件

NODE_ENV = 'development'
VITE_APP_TITLE = 'dev-project'
VITE_APP_BASE_API = '/api'
VITE_SERVE = 'http://www.test.com'

.env.production用于保存生产模式下的各种环境变量

NODE_ENV = 'production'
VITE_APP_TITLE = 'pro-project'
VITE_APP_BASE_API = '/prod-api'
VITE_SERVE = 'http://www.test.com'

默认情况下,开发服务器 (dev命令) 运行在 development (开发) 模式,而 build命令则运行在 production(生产) 模式。

  • Vite中获取.env 文件中的环境变量

需要使用loadEnv方法,加载当前模式mode下对应的 .env 文件,获取文件中对应的环境变量。以下是Vite官网的说明:

Vite配置代理Proxy

process.cwd()为项目根目录(index.html 文件所在的位置),把.env.development和.env.production都配置在项目根目录下,就可通过loadEnv来加载根目录下的所有.env文件,通过mode获取当前模式的环境变量。env中就保存着各种模式下对应的环境变量。

于是可以把配置代理改写成:

server: {
  proxy: {
    [env.VITE_APP_BASE_API]: {
      target: env.VITE_SERVE, 
      changeOrigin: true, 
      rewrite: (path) => path.replace(/^\/api/, ''), 
    },
  },
},

结语

🔥如果此文对你有帮助的话,欢迎💗关注、👍点赞、⭐收藏、✍️评论,支持一下博主~文章来源地址https://www.toymoban.com/news/detail-501605.html

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

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

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

相关文章

  • vite中server.proxy的一些配置

    target是目标代理的接口地址,当监测到以 /api开头的接口后,把axios请求中前面的本地服务器地址改为target的值,实际发送给后端的请求就是下方后一个请求          http://XX.XX.XX.XX:8080/api/def -- http://localhost:8081/api/def changeOrigin表示是否跨域 PathRewrite:替换请求中匹配的内容

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

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

    2023年04月08日
    浏览(51)
  • React配置代理(proxy)

    使用axios进行请求,而配置代理过程。   在package.json中,添加 proxy 配置项,之后所有的请求都会指向该地址 但这种方法只能配置一次,也只有一个 示例: 添加后,重启项目!!!让配置文件加载生效 然后就可以进行请求了 比如请求地址是  http://localhost:5000/api/index/index 那就

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

    某些情况下,我们需要通过代理才能访问特定网络环境下的git资源,git支持代理配置, 支持 http(s), SOCKS4/SOCKS5. HTTP 代理配置格式如下: 实际环境下, 其实我们大多数情况下,并不需要全部git资源都需要通过代理访问, 仅仅某些特定的git库需要通过代理设置,针对特定域名的代理配置就

    2024年02月06日
    浏览(37)
  • mac proxy【mac 终端配置代理】

    生效 而从 macOS Catalina 版开始,Mac 将使用 zsh 作为默认的 Shell 终端。要对其进行配置,首先执行如下命令修改用户全局配置文件: 1 利用本地的代理口地址 或者 利用代理服务端地址

    2024年01月23日
    浏览(41)
  • Centos配置web proxy(nginx 代理)

    Web proxy 安装Nginx组件 配置文件名为proxy.conf,放置在/etc/nginx/conf.d/目录下 为www.chinaskills.cn配置代理前端,通过HTTPS的访问后端Web服务器 后端服务器日志内容需要记录真实客户端的IP地址  缓存后端Web服务器上的静态页面 创建服务监控脚本:/shells/chkWeb.sh 编写脚本监控公司的网

    2024年01月16日
    浏览(58)
  • vue.config.js 配置proxy代理

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

    2024年03月15日
    浏览(49)
  • docker使用http_proxy配置代理

    钢铁知识库,一个学习python爬虫、数据分析的知识库。人生苦短,快用python。 在内网服务器中,docker经常需要下载拉取镜像,但由于没有网络要么只能手动导入镜像包,又或者通过http_proxy代理到其它服务器下载。 增加 http-proxy.conf 配置文件,正确配置好代理服务器后重启d

    2024年01月22日
    浏览(63)
  • vue配置代理服务器proxy 多种方法

    在Vue项目中配置代理服务器可以通过以下几种方法实现: 在Vue项目的根目录下创建一个vue.config.js文件,并添加以下代码: 上述代码中,我们使用 devServer 配置项来配置代理服务器。其中 proxy 属性用于配置代理的规则, /api 表示需要代理的接口路径。 target 属性表示代理的目

    2024年02月12日
    浏览(62)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包