为 API 启用 CORS 支持

可以为 API 启用跨源资源共享 (CORS) 支持。 通过使用 CORS 支持,Web 页面中的嵌入式脚本可以跨域边界来调用 API。

准备工作

此任务与配置 OpenAPI 3.0 API 定义相关。 有关如何配置 OpenAPI 2.0 API 定义的详细信息,请参阅 编辑 OpenAPI 2.0 API 定义

关于本任务

注:
  • CORS 支持仅在 DataPower® API Gateway上可用。
  • 启用 CORS 时,API 网关会运行 cors 预流策略以处理针对 API 发出的所有 CORS 请求。
  • 启用 CORS 并收到预检请求时,仅执行以下 API 操作:
    • cors 预流策略配置相应的响应头。
    • 将设置响应头。
  • 收到预检请求时,request.attributes.isCORSPreflight 标志将设置为 true
  • 对于所有预检请求,始终跳过 securityclient-identification 预流策略,无论是否启用 CORS 都是如此。

您可以使用 API Designer UI 应用程序或使用基于浏览器的 API Manager UI 来完成此任务。

您可以随时通过单击 图标 OpenAPI 源图标直接切换到底层 OpenAPI YAML 源。 要返回到设计表单,请单击 表单 图标 表单图标

过程

要为 API 启用 CORS 支持,请完成以下步骤:

  1. 打开 API 以进行编辑,如 编辑 OpenAPI 3.0 API 定义中所述。
  2. 选择 网关 选项卡,展开 网关和门户网站设置,然后单击 CORS
    这样会打开 " CORS " 页面。
  3. 选择 启用 CORS
  4. 可选: 配置 CORS 策略。
    应该创建 CORS 策略吗? 请查看以下注意事项:
    • CORS 策略是 API 定义的可选部分。 如果 API 定义没有 CORS 策略,但启用了 CORS ,那么将接受来自所有源的 CORS 请求。

      如果要接受来自所有源的 CORS 请求,请启用 CORS ,但不要将 CORS 策略添加到 API 定义。

    • 如果创建 CORS 策略,那么将仅接受来自 CORS 策略中包含的 CORS 规则中显式列出的源的 CORS 请求。 将拒绝来自任何其他源的 CORS 请求。

      如果要仅接受来自有限数量的源的 CORS 请求 (还可能要配置 Access-Control-Allow-Credentials 和 Access-Control-Expose-Headers 响应头) ,那么应启用 CORS 并创建 CORS 策略。 将仅接受在 CORS 策略的 CORS 规则的 allow-origin 字段中显式列出的那些源; 将拒绝来自未列出的任何源的 CORS 请求。

    • 要配置新的 CORS 策略,请完成以下步骤:
      1. 单击 CORS 策略旁边的 添加
      2. 将头 Access-Control-Allow-Credentials: true 包含在响应中。 选择 允许凭证Access-Control-Allow-Credentials 响应头会告知浏览器,当请求的凭证模式 (Request.credentials) 设置为 include 时,是否将响应公开给前端 JavaScript 代码。
      3. 要将以下一个或多个值附加到 Access-Control-Expose-Headers 响应头,请选择 公开头,然后从以下选项中进行选择:
        • 预定义 -网关的预定义值。 缺省情况下会选择此选项。
        • 后端 -来自后端响应的 Access-Control-Expose-Headers 的值。
        • 定制 -定制字符串。
      4. 单击创建
      5. 允许的源 旁边,单击 添加
      6. 输入源 URL,然后单击创建。 此设置指示可与来自指定源的请求代码共享响应。
    • 要修改现有 CORS 策略,请单击 CORS 页面上的允许的源条目。 然后,您可以修改个别源 URL、添加更多的源以及更改允许凭证设置。
    示例
    以下示例具有三条规则:
    • 接受源头 https://example.com,并在 CORS 响应中返回 Access-Control-Allow-Credentials: true
    • 接受源头 http://domain.com。 响应中不会返回 Access-Control-Allow-Credentials 头。
    • 接受以下任何源头:
      • http://example2.com
      • http://example3.com
      • http://example4.com
      响应中不会返回 Access-Control-Allow-Credentials 头。
      cors:
        enabled: true
        policy:
          -
            allow-origin:
              - 'https://example.com'
            allow-credentials: true
          -
            allow-origin:
              - 'http://domain.com'
          -
            allow-origin:
              - 'http://example2.com'
              - 'http://example3.com'
              - 'http://example4.com'
  5. 单击保存以保存更改。
  6. 可选: 要使用定制 OPTIONS 操作实现您自己的 CORS 解决方案,请完成以下步骤:
    1. 将以下头添加到 HTTP 响应:
      Access-Control-Allow-Origin: https://<portalhostname>
      Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept 
      开发者门户的主机名是什么 <portalhostname>
    2. 可选: 您可以通过 API Connect 作为强制调用 API 来代理 API ,以便自动处理 CORS。
    重要说明:
    • 如果实现自己的 CORS 解决方案,那么 必须 禁用步骤 3 中描述的 CORS 选项
    • 使用 HTTP OPTIONS 方法发送 CORS 预检请求。 因此,如果需要 API Connect 网关处理这些请求,那么必须对将处理预检请求的所有 API 启用 OPTIONS 方法; 请参阅 定义 REST API 的路径
    • 针对任何配置的速率限制,OPTIONS 请求被统计为 API 调用。 请注意,您可以将速率限制应用于个别操作; 请参阅 定义 API 操作的速率限制