如何在Netlify上为Angular部署预览配置后端代理？

针对你在Netlify部署Angular SSR预览时遇到的第三方Cookie拦截问题，以下是几个可行的解决办法：

方法1：使用Netlify Edge Functions实现路径代理 #

Edge Functions可在请求到达Angular SSR应用前拦截并转发请求，完美适配SSR场景：

1. 在项目根目录创建netlify/edge-functions目录
2. 创建api-proxy.ts文件，写入以下代码：

import { Context } from "netlify:edge";

export default async (request: Request, context: Context) => {
  // 仅处理/api开头的请求
  if (!request.url.startsWith(`${context.site.url}/api`)) {
    return;
  }

  // 构造目标API地址
  const targetUrl = new URL(request.url.replace(`${context.site.url}/api`, 'https://api.staging.openbadges.education'));
  
  // 转发请求，保留原请求的方法、头信息和 body
  const response = await fetch(targetUrl.toString(), {
    method: request.method,
    headers: request.headers,
    body: request.body,
    credentials: 'include' // 确保携带Cookie
  });

  // 修改响应头，允许前端获取Cookie
  const modifiedResponse = new Response(response.body, response);
  modifiedResponse.headers.set('Access-Control-Allow-Credentials', 'true');
  
  return modifiedResponse;
};

3. 在项目根目录的netlify.toml中添加路由配置：

[[edge_functions]]
  function = "api-proxy"
  path = "/api/*"

4. 提交代码后，Netlify会自动部署Edge Functions，部署预览的/api路径会转发到目标后端。

方法2：修改Angular SSR服务器逻辑添加代理 #

如果使用Angular Universal作为SSR方案，可在服务器端直接配置代理：

1. 安装代理依赖：

npm install http-proxy-middleware --save

2. 在server.ts中添加代理配置：

import { createProxyMiddleware } from 'http-proxy-middleware';

// ... 原有的server.ts代码

// 在app初始化后添加代理
app.use('/api', createProxyMiddleware({
  target: 'https://api.staging.openbadges.education',
  changeOrigin: true,
  secure: true,
  credentials: true, // 允许携带Cookie
  pathRewrite: { '^/api': '' } // 去除/api前缀转发到后端
}));

// ... 启动服务器的代码

3. 重新构建部署，Netlify运行SSR服务器时会自动处理/api路径的转发。

方法3：调整后端Cookie配置（若有权限修改后端） #

如果可以修改Django后端的Cookie设置，可调整SameSite属性：

1. 在Django的settings.py中修改SESSION_COOKIE_SAMESITE和CSRF_COOKIE_SAMESITE：

SESSION_COOKIE_SAMESITE = 'None'
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SAMESITE = 'None'
CSRF_COOKIE_SECURE = True

2. 确保后端服务运行在HTTPS环境下（你的staging环境已经满足），这样浏览器会允许第三方域名携带Cookie。

内容的提问来源于stack exchange，提问作者MetaColon