生存指南之 CORS + API Gateway

2020-04-25 本文已影响0人 Aceyclee

本文介绍了跨域资源共享的基本知识，以及如何避免云函数上 Serverless web API 的问题

构建 Web API 是 Serverless 应用中最流行的用例之一，您能在不增加其他操作开销的情况下，获得简单、可扩展的后端优势。

然而，如果您的网页正在调用后端 API，那么必须处理跨域资源共享 (CORS) 的问题，如果您的网页向与您当前所在域的不同域发出 HTTP 请求，则它必须是 CORS 友好的。

如果您发现以下错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource

那么本文可能对您有所帮助。

接下来，我们将介绍 Serverless + CORS 的相关信息，目录如下：

预检请求 (Preflight requests)
响应头 (Response headers)
CORS with cookie credentials

TL;DR

快速开始 🔜 如果您想快速解决 Serverless 应用中的 CORS，可以执行以下操作：

要处理 preflight requests，在每个 HTTP 端点中添加 enableCORS: true 和 integratedResponse: true 标记：

# serverless.yml
service: products-service

provider:
  name: tencent
  region: ap-guangzhou
  runtime: Nodejs8.9 # Nodejs8.9 or Nodejs6.10

plugins:
  - serverless-tencent-scf

functions:
  getProduct:
    handler: handler.getProduct
    events:
      - apigw:
          name: api
          parameters:
            path: /product
            stageName: release
            # 修改成你的 API 服务 ID
            serviceId: service-xxx
            httpMethod: GET
            # 开启集成相应，这里必须开启，才能自定义响应 headers
            integratedResponse: true,
            # 开启 CORS
            enableCORS: true
  createProduct:
    handler: handler.createProduct
    events:
      - apigw:
          name: api
          parameters:
            path: /product
            stageName: release
            # 修改成你的 API 服务 ID
            serviceId: service-xxx
            httpMethod: POST
            # 开启集成相应，这里必须开启，才能自定义响应 headers
            integratedResponse: true,
            # 开启 CORS
            enableCORS: false

要处理 CORS headers，请在响应中返回 CORS headers。主要标头是 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials。示例如下：

'use strict';

// mock function
function retrieveProduct(event) {
  return {
    id: 1,
    name: 'good1',
    price: 10,
  };
}

// mock function
function createProduct(event) {
  const { queryString } = event;
  return {
    id: Number(queryString.id),
    name: 'good1',
    price: 10,
  };
}

module.exports.getProduct = (event, context, callback) => {
  const product = retrieveProduct(event);

  const response = {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true,
    },
    body: JSON.stringify({
      product: product,
    }),
  };

  callback(null, response);
};

module.exports.createProduct = (event, context, callback) => {
  // Do work to create Product
  const product = createProduct(event);

  const response = {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true,
    },
    body: JSON.stringify({
      product: product,
    }),
  };

  callback(null, response);
};

CORS preflight requests

如果您不是在进行「simple request」，那么浏览器会用 OPTIONS 方法，发送 preflight
request 到资源里，您请求的资源将使用安全发送到资源的方法返回，并且可以选择返回有效发送的标头。

我们拆开来看看：

浏览器什么时候发送 preflight requests?

您的浏览器会对几乎所有的跨域请求发送一个 preflight requests。（例外是「simple requests」，但这只是请求的一小部分）。大体上看，一个简单请求只是一个 GET request 或者 POST request，如果您不在此范围内，则需要进行预检。

对 preflight requests 的响应是什么？

对一个 preflight requests 的响应包括其允许访问的资源，它允许在该资源的方法，如 GET, POST,
PUT 等。还可以包括被允许在该资源标头，如 Authentication。

如何处理 Serverless 中的 preflight requests?

要设置 preflight requests，您只需要在 API Gateway 的端点上配置一个 OPTIONS 。幸运的是，你可以非常简单地使用 Serverless Framework 来完成。

只需要在 serverless.yml 添加设置 enableCORS: true：

# serverless.yml

service: products-service

provider:
  name: tencent
  region: ap-guangzhou
  runtime: Nodejs8.9 # Nodejs8.9 or Nodejs6.10

plugins:
  - serverless-tencent-scf

functions:
  getProduct:
    handler: handler.getProduct
    events:
      - apigw:
          name: api
          parameters:
            path: /product
            stageName: release
            serviceId: service-lanyfiga
            httpMethod: GET
            # 开启集成相应，这里必须开启，才能自定义响应 headers
            integratedResponse: true,
            # 开启 CORS
            enableCORS: true
  createProduct:
    handler: handler.createProduct
    events:
      - apigw:
          name: api
          parameters:
            path: /product
            stageName: release
            serviceId: service-lanyfiga
            httpMethod: POST
            # 开启集成相应，这里必须开启，才能自定义响应 headers
            integratedResponse: true,
            # 开启 CORS
            enableCORS: false

CORS Response Headers

尽管 preflight request 仅适用于某些跨域请求，但每个跨域请求中都必须存在 CORS Response Headers，这意味着您必须将 Access-Control-Allow-Origin 添加进 handlers 的响应中。

如果您使用 cookies，还需要添加 Access-Control-Allow-Credentials。

要与上面的 serverless.yml 匹配，handler.js 文件应该如下设置：

// handler.js

'use strict';

module.exports.getProduct = (event, context, callback) => {
  // Do work to retrieve Product
  const product = retrieveProduct(event);

  const response = {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true,
    },
    body: JSON.stringify({
      product: product,
    }),
  };

  callback(null, response);
};

module.exports.createProduct = (event, context, callback) => {
  // Do work to create Product
  const product = createProduct(event);

  const response = {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true,
    },
    body: JSON.stringify({
      product: product,
    }),
  };

  callback(null, response);
};

这里需要注意 response 的 headers 属性，其中包含 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials。

下面是一个简单的示例：

// hello.js

const middy = require('middy');
const { cors } = require('middy/middlewares');

// This is your common handler, no way different than what you are used to do every day
const hello = (event, context, callback) => {
  const response = {
    statusCode: 200,
    body: 'Hello, world!',
  };

  return callback(null, response);
};

// Let's "middyfy" our handler, then we will be able to attach middlewares to it
const handler = middy(hello).use(cors()); // Adds CORS headers to responses

module.exports = { handler };

CORS with Cookie credentials

在上面的示例中，我们给定了 "*" 作为 Access-Control-Allow-Origin 的值。但是，如果您使用 request using credentials 则不被允许。为了使浏览器能够响应，Access-Control-Allow-Origin 需要包含发出请求的特定来源。有两种方法可以解决。

首先，如果只有一个发出请求的原始网站，则可以将其硬编码到云函数的响应中：

// handler.js

'use strict';

module.exports.getProduct = (event, context, callback) => {
  // Do work to retrieve Product
  const product = retrieveProduct(event);

  const response = {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': 'https://myorigin.com', // <-- Add your specific origin here
      'Access-Control-Allow-Credentials': true,
    },
    body: JSON.stringify({
      product: product,
    }),
  };

  callback(null, response);
};

如果有多个原始网站使用您的 API，那么需要采用一种更加动态的方法。你可以检查 origin header 看看是否在被批准的来源列表中，如果是，则在 Access-Control-Allow-Origin 返回原点值。

// handler.js

'use strict';

const ALLOWED_ORIGINS = [
    'https://myfirstorigin.com',
    'https://mysecondorigin.com'
];

module.exports.getProduct = (event, context, callback) => {

  const origin = event.headers.origin;
  let headers;

  if (ALLOWED_ORIGINS.includes(origin) {
    headers = {
      'Access-Control-Allow-Origin': origin,
      'Access-Control-Allow-Credentials': true,
    },
  } else {
    headers = {
      'Access-Control-Allow-Origin': '*',
    },
  }

  // Do work to retrieve Product
  const product = retrieveProduct(event);

  const response = {
    isBase64Encoded: false,
    statusCode: 200,
    headers
    body: JSON.stringify({
      product: product
    }),
  };

  callback(null, response);
};

在这个示例中，我们检查 origin header 是否匹配。如果匹配，我们会在 Access-Control-Allow-Origin 包含特定来源，并声明 Access-Control-Allow-Credentials 允许的来源。如果 origin 不是我们允许的来源之一，则我们将包含标准 headers，如果来源尝试进行凭据请求，则将被拒绝。

小结

处理 CORS 确实是一件麻烦的事情，但是使用 Serverless Framework 会让处理步骤变得简单得多！而这也就意味着再也不会出现 No 'Access-Control-Allow-Origin' header is present on the requested resource 这样的错误啦！👋

传送门：

GitHub: github.com/serverless

官网：serverless.com

欢迎访问：Serverless 中文网，您可以在最佳实践里体验更多关于 Serverless 应用的开发！