Question

解决

下面的问题只是由我的Lambda中构造的响应对象的body属性引起的。我忘了对数据进行字符串化，返回body: data而不是body: JSON.stringify(data)。响应的这个问题似乎触发了API网关的错误，导致请求失败并出现一些相当混乱的错误消息。

问题

我正在使用React，Serverless和Stripe API在电子商务网站上工作。我的前端React应用程序使用Axios向我的Lambda函数发出GET请求，该函数已通过API网关公开。 Lambda函数依次查询Stripe API并将Stripe响应数据返回给我的React应用程序。但是，我遇到CORS问题，因为我的React应用程序试图调用Lambda，它收到以下错误：

Failed to load: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 502.

在Insomnia中查询Lambda端点会返回带有{ "message": "internal server error" }的502响应。但是，从终端执行Lambda函数的serverless invoke命令会成功返回条带数据。

我正在我的serverless.yml文件中为该函数启用cors，并在this Serverless blog post中建议的Lambda代码响应中包含'Access-Control-Allow-Origin': '*'，我还尝试添加以下标头的各种组合我的Lambda回复和我的Axios请求基于this issue on Axios和this issue on Serverless上的建议。我已多次删除并重新部署该服务

Lambda响应标头

headers: {
      'Access-Control-Expose-Headers': 'Access-Control-Allow-Origin',
      'Access-Control-Allow-Credentials': true,
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
    },

React / Axios配置

  {
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    crossDomain: true
  }

目前我的代码如下：

反应应用

import Axios from 'axios';
import { GET_PRODUCTS_URL } from '../config';

export default () => {
  return Axios
  .get(GET_PRODUCT_URL, {
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    crossDomain: true
  })
  .then(({ data }) => data)
  .catch(console.log);
}

LAMBDA

import Stripe from 'stripe';
const apiKey = process.env.STRIPE_SECRET_KEY;

const stripe = Stripe(apiKey);

module.exports.handler = (event, context, callback) => {
  return stripe.products
    .list()
    .then(({ data }) => {
      const response = {
        statusCode: 200,
        headers: {
          'Access-Control-Expose-Headers': 'Access-Control-Allow-Origin',
          'Access-Control-Allow-Credentials': true,
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': '*',
        },
        body: data,
      };
      callback(null, response);
    })
    .catch(console.log);
}

Serverless.yml

service: srd

provider:
  name: aws
  runtime: nodejs6.10
  stage: ${opt:stage, self:custom.defaultStage}
  region: eu-west-1
  memorySize: 256
  timeout: 6
  versionFunctions: true

plugins:
  - serverless-plugin-optimize
  - serverless-plugin-scripts

package:
  individually: true

functions:
  get-products:
    handler: lambda/get-products.handler
    name: srd-get-products-${self:provider.stage}
    description: 'get srd products from stripe'
    environment:
      STRIPE_PUBLISHABLE_KEY: ${self:custom.stripe_publishable_key.${self:provider.stage}}
      STRIPE_SECRET_KEY: ${self:custom.stripe_secret_key.${self:provider.stage}}
    events:
      - http:
          path: products
          method: get
          cors: true

custom:
  defaultStage: dev
  stripe_publishable_key:
    dev: ${file(env.yml):STRIPE_DEV_PUBLISHABLE_KEY}
    live: ${file(env.yml):STRIPE_LIVE_PUBLISHABLE_KEY}
  stripe_secret_key:
    dev: ${file(env.yml):STRIPE_DEV_SECRET_KEY}
    live: ${file(env.yml):STRIPE_LIVE_SECRET_KEY}

我已经在这里工作了几个小时，任何见解都非常赞赏。

修改/额外 从CLI发出选项请求将返回以下内容：

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 0
Connection: keep-alive
Date: Mon, 19 Mar 2018 06:52:12 GMT
x-amzn-RequestId: 0d10c9d1-2b42-11e8-b270-a723e367048e
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-Amz-User-Agent
Access-Control-Allow-Methods: OPTIONS,GET
Access-Control-Allow-Credentials: false
X-Cache: Miss from cloudfront
Via: 1.1 e40b14deb4a844594f746b751f632677.cloudfront.net (CloudFront)
X-Amz-Cf-Id: eMvu3Ke7m7GNFCFgIOGVJmoObFwYMeEt4o8AByoipfMn1nXIi9Vo0g==

Answer 1

CORS错误消息中的HTTP响应代码为502.这表示您请求的服务器不可用。

如果是502，浏览器无法成功发出OPTIONS个请求，因此即使服务器中的CORS设置正确，您仍会收到CORS错误，因为它没有得到正确解决。

查看您的服务器并确保它正常运行。一旦502错误得到修复，再试一次，你应该好好去。尝试制作手动OPTIONS请求，类似于浏览器的请求，并查看是否收到相同的错误。

无服务器Lambda和API网关的CORS问题

1 个答案: