Proxy

代理服务器是现代互联网的一种技术和策略，常用于翻墙、加快访问速度等领域。在前端技术中，proxy也是常见的概念，但仅用于开发阶段的代理开发服务器，生产模式下将失效。

Proxy 代理转发

代理最基础的作用就是转发，将某一网络请求转发给target目标服务器。以Vite配置代理为例：

export default defineConfig({
  server: {
    port: 5000,
    proxy: {
      '/api': {
        target: 'https://api.apiopen.top',
        changeOrigin: true,
      }
    }
  },
})

上述配置就可在开发阶段将请求 http://localhost:5000/api 的请求转发到 https://api.apiopen.top/api 上

本地vite服务器端口为5000，使用相对路径的网络请求时，如api/getUser，将以相对路径的方式访问本机资源，即 http://localhost:5000/api/getUser

最佳实践

了解最佳实践之前，我们需要清楚以下几个现实情况：

一个具有前后端的大型项目，其前后端一般在同一服务器下，具有相对路径的羁绊，因此请求以相对路径书写为最佳，既可以保证访问有效，又可以避免因服务器迁移带来的修改api工作。
而本地开发过程中相对路径是访问本地资源，显然需要配置代理转发，转发到对应服务器（正式机或测试机）。
相对路径的本地请求在本地服务器上被转发，转发前的本地请求是同源的，不会有浏览器跨域限制

综上，最佳实践应为：

// axios 配置
const axiosHttp = axios.create({
  baseURL: '/api',
})

// vite 配置
export default defineConfig({
  server: {
    port: 5000,
    proxy: {
      '/api': {
        target: 'https://myapi.xyz',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
})

// 请求发送
const { data: res } = await axiosHttp.get('sentences')

而对于项目中会用到的第三方api，就需要不区分生产环境和开发环境，在文件中写死地址。

跨域

何为跨域请求，只要是请求的服务器与本身服务的域名、端口不一致，即为跨域。

浏览器处理跨域请求时会先将其放行，若被请求端返回字段中带有允许跨域的信息，则浏览器可以将数据返回到请求端，反之，浏览器将进行拦截，告诉请求端违反同源策略。

所以跨域限制是被请求端以及返回数据，但被浏览器拦截。

使用proxy是解决跨域的有效方案，因为浏览器同源协议无法请求非同源的地址，但是服务器直接没有同源协议，利用将本地请求转到本地服务器进行代理转发，从而绕过了同源协议的限制，通过代理的实现可以解决跨域的问题，换了个思路去解决实际产生的问题，实在是一个比较好的解决方法。

例如在上述最佳实践中，在浏览器中查看网络请求，会发现请求地址为http://localhost:5000/api/sentense，这自然不会违反浏览器的同源协议，而之后vite服务器的转发则与浏览器无关。

这一套策略像是绕道而行，通过套壳，绕过了浏览器检查。

Proxy ​

Proxy 代理转发 ​

最佳实践 ​

跨域 ​

Proxy

Proxy 代理转发

最佳实践

跨域