reactjs - 与 GCP HTTP 端点反应

Question

我在 GCP 中创建了一个带有 HTTP 触发器的云函数。我正在尝试使用在请求fetch中将 JSON 对象传递给此端点。POST我已经尝试使用在functions-framework本地服务器功能和部署到 GCP。如果我使用 Postman/dev 工具，我能够成功发出请求并收到正确的响应。

我有一个 React 应用程序，它在组件的功能中运行以下功能componentDidMount()：

getData() {
    const requestOptions = {
        method: 'POST',
        mode: 'cors',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Origin': 'AUTHORITY'
        },
        body: JSON.stringify({
          "vendors": [{
            "postcode": "12345",
            "distance": 15
          }, {
            "postcode": "67890",
            "distance": 15
          }, {
            "postcode": "13579",
            "distance": 15
          }, {
            "postcode": "24680",
            "distance": 25
          }, {
            "postcode": "10293",
            "distance": 10
          }],
          "customer": "12345"
        })
    };

    return fetch('http://localhost:8080/', requestOptions)        
      .then((response)=>response.json())
      .then((responseJson)=>{return responseJson});
  }

当我检查网络选项卡时，JSON 对象没有随请求一起传递。POST请求和OPTIONS请求都在“网络”选项卡中具有状态blocked。我可以按下Edit and Resend并附加正确的 JSON 对象，然后响应返回一个200状态。

在 Cloud Function 内部，我目前将响应返回为：

res.set({ 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': '*', 'Access-Control-Allow-Methods': '*' }).send(result);

感觉问题出在 React 方面（JSON 没有随 POST 请求一起发送），但很可能是 CORS 问题。

标签： reactjsgoogle-cloud-platformgoogle-cloud-functionsfetch