简单的 POST 请求在 Postman 中有效，但在浏览器中无效

Question

我遇到一个问题，POST端点在 Postman 中运行时返回响应，但在浏览器中运行时不返回响应。

我已经通过无服务器在 AWS 上设置了一个 API 端点。这是 .yml 配置：

service: tableau-export-rest

provider:
  name: aws
  runtime: nodejs10.x
  region: eu-west-1
  stage: ${opt:stage, 'dev'}
  timeout: 900
  memorySize: 3008

functions:
  storeExportFiters:
    handler: index.storeExportFiters  
    events:
      - http: 
          path: /store-export-filters
          method: post
          cors: true 

端点解析器storeExportFiters（这是一个 lambda）现在只返回一条成功消息：

module.exports = (event, ctx, cb) => {
  return cb(null, {
    statusCode: 200,
    body: JSON.stringify({
      worked: true
    })
  });
}

当我将其部署到 AWS 并尝试通过POST没有正文或任何内容的请求从 Postman 访问端点时，它向我发送的响应很好。当我尝试在浏览器中执行此操作时，我收到错误cors：

从源“ http://localhost:9003 ”访问“ https://myapi.com/store-export-filters ”处的 XMLHttpRequest已被 CORS 策略阻止：不存在“Access-Control-Allow-Origin”标头关于所请求的资源。

以下是用于尝试从端点获取响应的浏览器代码。我使用Axios进行 http 请求：

  axios.post('https://myapi.com/store-export-filters')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

我不明白为什么我会在这里收到 CORS 错误，特别是当它在我的机器上的 Postman 中工作时。

Answer 1

您的 API 未针对跨源请求进行配置。您需要配置您的服务器以允许这些请求。

Access-Control-Allow-Origin: *

这将允许您的 API 接收来自任何来源的请求，但这可能是一个主要的安全问题。

将您的 API 配置为仅接受来自特定来源的请求可修复此问题。

Access-Control-Allow-Origin: hostname:port