前端项目中<代理> or <环境变量>是啥？

最近做项目发现，有些女朋友对于前端项目中的代理和环境变量傻傻分不清，不知道它们长什么样子，有什么作用，这篇文章不探讨太深层的东西，只说实际应用，如有错误，希望指出！

一、什么是前端代理

前端代理是一种在客户端（通常是浏览器）与服务器之间设置的中间层，用于转发或处理网络请求的技术手段。

前端代理的主要作用包括但不限于以下几点：

跨域资源共享（CORS） ：由于同源策略的限制，不同域名下的文档或脚本不能通过浏览器进行通信。使用前端代理可以解决这个问题，使得前端能够访问不同源的后端服务。
接口转发：在开发过程中，可能需要将请求从一个地址转发到另一个地址，前端代理可以实现这一点，便于开发和测试环境的搭建。
负载均衡：通过代理可以将流量分发到不同的服务器上，提高网站的可用性和响应速度。
安全性：代理可以隐藏后端服务器的真实IP地址，增加系统的安全性。
缓存静态资源：代理服务器可以缓存静态资源，减少对后端服务器的请求次数，提高性能。
记录和监控：代理服务器可以记录所有的进出请求，方便进行监控和分析。

在实际应用中，前端代理可以通过多种方式实现，如使用Nginx、Node.js等技术搭建代理服务器，或者在前端框架如Vue、React中使用内置的代理配置。

总之，了解和使用前端代理对于前端开发者来说是非常重要的，它不仅能够帮助解决开发过程中的一些常见问题，还能提升应用的性能和安全性这里我们说一说Vue、React脚手架内置的代理。

有些小伙伴在本地测试的时候会发现请求网址baseUrl是本地路径，看到这里就是代理地址生效了，它的本质还是本地作为一个代理服务器和远程服务器进行交互，众所周知服务器和服务器之间通信是不存在跨域问题的，然后就是本地浏览器和本地服务器交互所以会看到baseUrl是本地地址的原因，接下来看代码。

这段代码是一个配置对象，用于设置开发服务器（proxy）的相关参数。下面是对每个属性的解释：

proxy: 代理配置，用于将请求转发到指定的目标地址。
- /api: 匹配以 /api 开头的请求路径，并将其转发到目标地址。
  - target: 目标地址，即请求将被转发到的地址。
  - changeOrigin: 是否改变请求的来源。
  - pathRewrite: 路径重写规则，将请求路径中的 /api 替换为空字符串。

需要注意的是代理是只在本地开发环境中起作用的，项目部署还需要运维或者后端大哥使用Nginx进行配置。

二、什么是环境变量

在前端项目中，环境变量是一种用于区分不同运行环境（如开发、测试、生产等）的配置方式。它们允许开发者根据不同的环境设置特定的参数，以便项目能够在各种环境下正确运行。以下是环境变量的主要作用和特点：

配置枢纽：环境变量集中了项目的配置信息，使得项目的设置更加集中和便于管理。
环境区分：通过设置不同的环境变量，可以轻松区分开发环境、测试环境和生产环境等，确保项目在不同阶段使用恰当的配置。
安全性：敏感信息如API密钥和数据库密码可以存储在环境变量中，这些信息不会随代码一起被部署到服务器，从而增加了应用的安全性。
易于切换：开发者可以通过修改环境变量来快速切换项目的环境设置，而无需改动代码本身。
与构建工具集成：现代前端构建工具如Webpack、Rollup、Vite等都支持使用环境变量，这使得环境变量成为前端工程化的一个重要组成部分。
使用方法 ：在项目中定义的环境变量可以通过process.env.环境变量名的方式来访问和使用。
自定义规范 ：对于Vue项目，自定义的环境变量应该以VUE_APP_为前缀，以确保它们不会被无意中覆盖或删除。
自动化读取 ：通过运行不同的命令（如npm run dev），项目会自动读取对应环境（如开发环境）的配置文件（如.env.development文件）。

综上所述，环境变量在前端项目中扮演着至关重要的角色，它们不仅提高了项目的灵活性和安全性，还简化了多环境配置的管理。

这段代码中可以看到以.env开头的文件就是环境变量存储文件了，在baseURL常量被环境变量赋予的值就可以在不同的开发环境下进行使用了，例如在正常的npm run dev本地开发环境process.env.VUE_APP_DOMAIN_PREFIX就会去对应.env.development文件内的值，打完包进行生产编译时就会对应到.env.production文件内的值，这样就可以请求不同的后端地址去做测试啦～

三、总结一下

前端代理主要是用于解决开发过程中的跨域问题和接口地址管理，而环境变量则用于区分不同环境的配置。

前端代理通常是在开发环境中使用，它通过一个中间服务来转发请求，使得开发环境下的请求可以绕过跨域的限制。代理能够在开发环境下将请求重定向到相应的开发服务器，而在生产环境中则不起作用。这样，开发者可以在不修改代码的情况下，通过配置代理来解决开发时的跨域问题。环境变量则提供了一种在不同环境中使用不同配置的方法。它们通常用于存储诸如API密钥、数据库连接字符串等敏感信息，或者用来区分开发、测试、生产等不同环境的配置。环境变量可以通过项目配置文件或操作系统环境设置，并在项目的运行时被读取和应用。

对于应用示例：

前端代理 的应用示例可以是，在 Vue.js 项目中使用 vue.config.js 文件配置代理，将所有 /api 路径的请求代理到 http://localhost:3000 的开发服务器上。这允许你在本地开发时访问后端服务，而不必担心跨域问题。配置可能如下所示：

javascript 复制代码

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

环境变量 的应用示例则可以是，在项目中通过环境变量来设置不同的API端点。例如，你可以在 .env 文件中设置 REACT_APP_API_URL 环境变量，然后在代码中通过 process.env.REACT_APP_API_URL 来访问这个值。这样，你就可以根据不同的环境（开发、生产等）来设置不同的API地址，而无需修改代码本身。

arduino 复制代码

// .env 文件
REACT_APP_API_URL=http://localhost:3000/api

// 在 JavaScript 代码中使用
fetch(process.env.REACT_APP_API_URL + '/some-endpoint')

总的来说，前端代理主要用于开发过程中的请求转发和跨域问题处理，而环境变量则用于管理和区分不同环境下的配置。合理运用这两种技术，可以使前端项目的开发和部署更加灵活和安全。