Netlify Functions跨域问题求助：开发可用生产环境失效

问题概述 #

使用Netlify Functions时遭遇跨域错误：

Blocked request to a resource of another origin: the "Same Origin Policy" rules do not allow loading remote resources from http://localhost:8888/api/contact

在package.json中配置"proxy": "http://localhost:8888"后，开发环境可正常运行，但生产环境失效。需实现开发、生产环境均能正常调用函数的方案。

解决方案 #

1. 统一前端请求路径

前端代码中请求接口时，使用相对路径/api/contact，不要硬编码http://localhost:8888。这样：

• 开发环境：通过代理转发到本地Netlify Functions服务
• 生产环境：通过Netlify的Redirect规则转发到函数

2. 开发环境：配置Astro专属代理

Astro不识别package.json中的proxy字段，需在astro.config.mjs中添加代理配置：

import { defineConfig } from 'astro/config';

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8888',
        changeOrigin: true,
      },
    },
  },
});

启动本地开发服务后，/api/contact会自动转发到http://localhost:8888/api/contact，解决开发环境跨域。

3. 生产环境：验证Netlify配置有效性

你的netlify.toml配置已正确设置Redirect规则，需确认以下几点：

• 函数文件确实存放在netlify/functions目录，与配置中functions = "netlify/functions"路径一致
• 部署时Netlify控制台无配置解析错误，Redirect规则已生效（可在Netlify站点的「Domain management」→「Redirects」中查看）

4. 函数代码优化（修复潜在问题）

（1）修正环境变量校验逻辑

代码中存在变量名不一致问题：

// 原代码错误：校验SENDGRID_API_KEY却抛出SENDINBLUE_API_KEY的错误
if (!process.env.SENDGRID_API_KEY) {
  throw new Error("Missing SENDGRID_API_KEY"); // 统一变量名与错误提示
}

（2）异步操作添加await

transporter.sendMail()是异步函数，需添加await确保邮件发送完成后再返回响应：

await transporter.sendMail(mail);

（3）添加CORS响应头

在函数返回时统一携带CORS头，避免直接访问函数时出现跨域问题：

// 定义CORS头
const corsHeaders = {
  'Access-Control-Allow-Origin': '*', // 生产环境可替换为你的域名，如https://your-site.netlify.app
  'Access-Control-Allow-Headers': 'Content-Type',
};

// 在所有返回结果中携带headers
return {
  statusCode: 200,
  headers: corsHeaders,
  body: JSON.stringify({ message: "Email sent" }),
};

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