使用凭据发出 CORS 预检请求

Question

我正在使用无服务器 yml 模板将我的函数部署到 aws。以下 sn -p 显示了其中一个端点的配置，

functions:
  publish:
    handler: lambda.publish
    events:
      - http:
          method: post
          path: publish
          cors:
            origin: ${self:custom.origin.${self:custom.stage}}
            allowCredentials: true

这是我的获取请求，

fetch(`${SOME_DOMAIN}/publish`, {
      method: 'POST',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })

我正在像这样处理我的 lambda 中的响应标头，

const ALLOWED_ORIGINS = [
  'http://localhost:3001',
  'https://staging.company.com.au',
  'https://blaze-staging.company.com.au',
  'https://www.company.com.au',
  'https://blaze.company.com.au',
  'https://direct.company.com.au',
]

const origin = event.headers.origin
let headers

if (ALLOWED_ORIGINS.includes(origin)) {
  headers = {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': origin,
    'Access-Control-Allow-Credentials': true,
  }
} else {
  headers = {
    'Access-Control-Allow-Origin': 'http://localhost:3001',
  }
}

const response = {
  statusCode: 200,
  headers,
  body: JSON.stringify({ message: 'Successfully published the message.' }),
}

callback(null, response)

我无法让飞行前请求工作，因为我无法设置多个来源。如何解决这个问题？设置mode: 'no-cors' 在请求上实际上是允许来自任何域的请求。非常感谢任何帮助。

飞行前请求将显示以下错误：

无法加载https://o9a0130i2r.execute-api.us-east-1.amazonaws.com/development/publish： 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“https://direct.company.com” 使用权。响应的 HTTP 状态代码为 403。如果响应不透明 满足您的需求，将请求的模式设置为“no-cors”以获取 禁用 CORS 的资源。

Answer 1

向处理 post 请求的同一个 lambda 添加一个额外的端点。

类似这样的serverless.yml

  options:
    handler: lambda.options
    events:
      - http:
          method: options
          path: publish

您可以将您的来源添加到允许的来源列表中

export const options = async (event, context, callback) => {
  const ALLOWED_ORIGINS = [
    'http://localhost:3001',
  ]

  const origin = event.headers.origin || event.headers.Origin
  let response

  if (ALLOWED_ORIGINS.includes(origin)) {
    response = {
      statusCode: 200,
      headers: {
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Origin': origin,
        'Access-Control-Allow-Credentials': true,
      },
      body: JSON.stringify({ message: 'Success' }),
    }
  } else {
    response = {
      statusCode: 403,
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
      body: JSON.stringify({ message: {
        error: 'Missing Authentication token',
        origin: `Request origin is ${origin}`,
      },
      }),
    }
  }

  callback(null, response)
  return
}

现在，当浏览器发出选项请求时，我们会使用这个方法处理它，如果它来自允许的来源或错误，则返回 200。您可以根据需要自定义错误消息。