Netlify.toml 配置代理请求指南

啊？不会有前端还要后端配置跨域吧？

啊？不会还有后端不会配置Nginx吧？

啊？不会还有人改个请求还要看后端的脸色吧？

今天，一招让你解决所有跨域问题，尤其是私活，或者小项目。生产环境，请勿使用

场景和需求：为什么需要代理？

常见应用场景

• 分离部署：静态站点在 Netlify，API 服务在别的地方。
• 后端地址隐藏：通过代理屏蔽真实后端 URL，提升安全性。
• 简化路径：用 /api/* 替代长长的 https://backend.example.com/v1/*。
• 跨域问题：代理直接转发请求，免掉 CORS 的烦恼。

示例：项目结构

• 静态站点地址：https://your-site.netlify.app
• 后端服务地址：https://api.example.com

需求是将 /prod-api/* 的请求代理到 https://api.example.com，并支持跨域。

配置文件位置：Netlify.toml

项目根目录新建一个 netlify.toml，粘代码。

基础代理配置

[[redirects]]
  from = "/prod-api/*"
  to = "https://api.example.com/:splat"
  status = 200

[[headers]]
  for = "/prod-api/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"
    Access-Control-Allow-Methods = "GET, POST, OPTIONS"
    Access-Control-Allow-Headers = "Content-Type"

这段代码说人话就是：

• [[redirects]]：转发 /prod-api/* 请求到后端。
• [[headers]]：允许跨域，连带支持各种奇奇怪怪的请求头。

步骤演示：手把手实现

1. 创建配置文件

   touch netlify.toml

2. 写入代理配置
   直接复制上面的代码粘进去。

3. 部署项目到 Netlify

   • 提交代码到 GitHub。
   • 让 Netlify 自动构建和部署。

4. 验证代理是否生效

   • 访问 https://your-site.netlify.app/prod-api/test。
   • 确认请求被转发到 https://api.example.com/test。

高阶玩法：环境变量和多路径支持

用环境变量切换后端地址

Netlify 支持动态使用环境变量。这样你可以为不同环境（比如开发、生产）设置不同的后端地址。

1. 设置环境变量

   • 打开 Netlify 控制台。
   • 添加 API_BASE_URL，值为后端地址（比如 https://api.example.com）。

2. 修改 netlify.toml

   [[redirects]]
     from = "/prod-api/*"
     to = "{{env.API_BASE_URL}}/:splat"
     status = 200

3. 验证效果

   • 用 netlify dev 本地启动。
   • 访问测试路径确保切换后端地址正常。

多路径代理

有多个后端？分开写：

[[redirects]]
  from = "/api/*"
  to = "https://api.example.com/:splat"
  status = 200

[[redirects]]
  from = "/auth/*"
  to = "https://auth.example.com/:splat"
  status = 200

提示 & 踩坑

提示：加密后端地址

后端地址是隐私，可以用环境变量避免暴露。

踩坑合集

1. 后端甩锅？自己搞定！

   • 有些沙雕后端直接甩“你去配代理吧，我不动配置”，真·摆烂🫠。
   • 靠这份配置，你不用求人。秒杀需求，扬眉吐气。

2. 路径匹配不对

   • /prod-api/* 和 /prod-api* 可不一样。
   • 小心漏写 /，不然 GG。

3. 死循环代理

   • 别让 /prod-api/* 又被代理回来。

Demo：本地调试

用 Netlify 提供的开发服务器：

netlify dev

• 直接模拟生产环境的代理。
• 访问 http://localhost:8888/prod-api/test 测试效果。

更多资源

• Netlify Redirects 文档
• Netlify Headers 文档
• Netlify 环境变量文档

总结

你学废了吗？，配置 netlify.toml 把后端整活交给我们自己来做，效率拉满。别再跪求后端改接口了，前端的独立战争，开始了！🔥