5

解决了

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

问题

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

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 端点会返回 502 响应{ "message": "internal server error" }。但是serverless invoke从终端执行 Lambda 函数的命令成功返回了 Stripe 数据。

我正在为我的 serverless.yml 文件中的函数启用 cors 并包含'Access-Control-Allow-Origin': '*'在我的 Lambda 代码响应中，如本无服务器博客文章中所建议的那样，我还尝试将以下标头的各种组合添加到我的 Lambda 响应和我的 Axios 请求中关于 Axios上的这个问题和Serverless上的这个问题的建议。我已多次删除并重新部署该服务，并且

Lambda 响应标头

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

反应/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);
}

拉姆达

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);
}

无服务器.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==
4

1 回答 1

2

CORS 错误消息中的 HTTP 响应代码显示 502。这意味着您请求的服务器不可用。

在 502 事件中，浏览器无法发出成功的OPTIONS请求，因此即使您在服务器中的 CORS 设置正确，您仍然会收到一个 CORS 错误，因为它没有正确解析。

查看您的服务器并确保它正常运行。修复 502 错误后，再试一次，您应该一切顺利。尝试手动OPTIONS发出请求，类似于浏览器发出的请求，看看是否会收到相同的错误。

于 2018-03-18T20:37:52.747 回答