阿里云函数计算 FC 部署 Node 接口如何配置响应头解决前端跨域

文章导读
在阿里云函数计算 FC 中解决 Node 接口跨域,最推荐的方式是在函数代码内直接设置 HTTP 响应头。适用场景为基于 HTTP 触发器的 Web 服务,风险边界在于需同时处理 OPTIONS 预检请求。
📋 目录
  1. 快速处理思路
  2. 为什么会这样
  3. 分步处理
  4. 怎么验证是否生效
  5. 常见坑
  6. 常见问题
  7. 参考来源
A A

在阿里云函数计算 FC 中解决 Node 接口跨域,最推荐的方式是在函数代码内直接设置 HTTP 响应头。适用场景为基于 HTTP 触发器的 Web 服务,风险边界在于需同时处理 OPTIONS 预检请求。

先说结论:阿里云函数计算 FC 的 Node.js 函数需通过代码返回响应头来实现跨域,网关层默认不自动添加 CORS 头。

  • 适合:基于 HTTP 触发器自定义域名的 API 服务
  • 先准备:确认函数运行时为 Node.js 且拥有代码编辑权限
  • 验收:使用 curl 或浏览器开发者工具检查响应头是否包含 Access-Control-Allow-Origin

快速处理思路

在 Node.js 函数入口文件中,构造返回对象时显式写入 CORS 相关 Header。以下是最小可用代码片段,适用于 FC 3.0 及以上版本 HTTP 触发器。

exports.handler = async (event, context) => {
  const headers = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    'Content-Type': 'application/json'
  };

  // 处理预检请求
  if (event.httpMethod === 'OPTIONS') {
    return {
      statusCode: 200,
      headers: headers,
      body: ''
    };
  }

  // 正常业务逻辑
  return {
    statusCode: 200,
    headers: headers,
    body: JSON.stringify({ message: 'success' })
  };
};

为什么会这样

浏览器基于同源策略阻止跨域请求,服务器必须返回特定响应头授权。

阿里云函数计算 FC 作为 Serverless 计算服务,其 HTTP 触发器直接将函数返回值作为 HTTP 响应返回给客户端。FC 网关默认不会替用户添加跨域头,因此必须在函数代码逻辑中显式定义 headers 字段。如果代码未返回这些头,浏览器会拦截响应并报 CORS 错误。

分步处理

按以下顺序修改代码并部署,确保跨域配置生效。

步骤 1:编辑函数代码
登录阿里云函数计算控制台,进入目标服务下的函数详情页。选择代码编辑 tab,找到入口文件(通常为 index.js 或 app.js)。

阿里云函数计算 FC 部署 Node 接口如何配置响应头解决前端跨域

步骤 2:添加响应头逻辑
在返回响应对象前,定义 headers 对象。必须包含 Access-Control-Allow-Origin 字段。若前端需要携带 Cookie,该字段不能为星号,必须指定具体域名。

步骤 3:处理 OPTIONS 请求
浏览器在发送复杂跨域请求前会先发 OPTIONS 预检请求。代码中需判断 event.httpMethod 是否为 OPTIONS,若是则直接返回 200 状态码及 CORS 头,不执行业务逻辑。

步骤 4:部署生效
点击部署按钮。若使用 CLI 工具,执行 deploy 命令。部署完成后,函数新版本立即生效,旧版本请求不受影响。

怎么验证是否生效

使用命令行工具或浏览器网络面板检查响应头。

方法 1:curl 命令检查
在终端执行以下命令,观察输出中是否包含 Access-Control-Allow-Origin。

curl -I -X OPTIONS https://your-custom-domain.com/your-path

方法 2:浏览器开发者工具
打开浏览器 Console 和 Network 面板,发起前端请求。查看响应头列表,确认 Access-Control-Allow-Origin 存在且值匹配前端域名。若控制台无 CORS 报错,则配置成功。

常见坑

配置跨域时容易忽略预检请求和缓存策略,导致间歇性失败。

阿里云函数计算 FC 部署 Node 接口如何配置响应头解决前端跨域
  • OPTIONS 请求未放行:只配置了 POST 跨域头但未处理 OPTIONS 方法,导致浏览器预检失败。必须显式判断 httpMethod 为 OPTIONS 时返回 200。
  • 通配符与凭证冲突:Access-Control-Allow-Origin 设为 * 时,Access-Control-Allow-Credentials 不能设为 true。若需传 Cookie,Origin 必须指定具体域名。
  • CDN 缓存干扰:若在 FC 前配置了 CDN,OPTIONS 请求可能被缓存。需在 CDN 配置中设置 OPTIONS 方法不缓存或透传回源。

常见问题

为什么配置了头浏览器还是报跨域错误?

通常是因为 OPTIONS 预检请求未返回 200 状态码。

检查代码是否拦截了 OPTIONS 方法,确保预检请求直接返回成功,且不执行后续鉴权逻辑。

Access-Control-Allow-Origin 可以设多个域名吗?

HTTP 协议标准不支持该字段设置多个值。

需要在代码中读取请求头中的 Origin 字段,判断是否在白名单内,动态返回对应的 Origin 值。

函数计算自定义域名需要单独配置跨域吗?

不需要,跨域配置在函数代码层生效。

自定义域名仅负责路由转发,响应内容完全由函数代码控制,无需在域名管理页面额外开启 CORS 开关。

参考来源

  • 阿里云函数计算官方文档,产品详情页,https://help.aliyun.com/product/50980.html
  • 阿里云函数计算官方文档,HTTP 触发器概述,https://help.aliyun.com/zh/fc/developer-reference/http-trigger-overview