React Fetch Google Cloud Function http cors req.method选项，开机自检 [英] React Fetch Google Cloud Function http cors req.method OPTIONS, POST

问题描述

节省时间并跳过答案

save time and skip to answer

我的axios'GET'this.props.profile.id有什么问题，可以从react-redux-firebase正确登录到控制台，但这又是另一回事了.

What's wrong with my axios 'GET' this.props.profile.id logs into the console correctly from react-redux-firebase, but that's another story.

...

const response = await axios.get(
  "https://us-central1-thumbprint-1c31n.cloudfunctions.net/listCharts",
  { 'seatsioid': this.props.profile.id }
);

还是云函数标头?

const functions = require('firebase-functions');
//const admin = require('firebase-admin');
const { SeatsioClient } = require('seatsio')
const cors = require('cors')
//admin.initializeApp(functions.config().firebase);


// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//
exports.listCharts = functions.https.onRequest(async(req, res) => {
  cors(req, res, async () => {
    res.set('Access-Control-Allow-Origin', 'https://1c31n.csb.app');
    //res.set('Access-Control-Allow-Credentials', 'true');

    res.set('Access-Control-Allow-Methods', 'GET');
    res.set('Access-Control-Allow-Headers', 'Content-Type', 'X-Requested-Width', 'Accept', 'seatsioid')
    res.set('Access-Control-Max-Age', '60');
  var allowedOrigins = ['https://1c31n.csb.app', 'https://1c31n.codesandbox.io'];
  var origin = req.headers.origin;
  if(allowedOrigins.indexOf(origin) > -1){}
  const seatsioid = **req.get('seatsioid')
  let clientAdmin = new SeatsioClient('<THIS_IS_MY_ADMIN_SEATSIO_secretKey>')
  let subaccountInfo = await clientAdmin.subaccounts.retrieve(seatsioid);
  let secretKey = subaccountInfo.secretKey
  let clientDesignerKey = subaccountInfo.designerKey
  let charts = []
  let clientUser = new SeatsioClient(secretKey)
  for await(let chart of clientUser.charts.listAll()){
    charts.push(`chart":"${chart.key}`)
    }
    let couple = {
      charts,
      clientDesignerKey
    }
    res.send(couple)
})
})

谢谢

推荐答案

这花了我几天的时间.希望这对读者有帮助

This took dayssss for me. hopefully this helps readers

express的cors中间件: https://expressjs.com/en/resources/middleware/cors.html

express' cors middleware : https://expressjs.com/en/resources/middleware/cors.html

用于cors中间件的Google Cloud Function抽象: https://cloud.google.com /functions/docs/writing/http

Google Cloud Function abstraction for cors middleware : https://cloud.google.com/functions/docs/writing/http

通过http调用GCFunctions(用于获取): https://firebase.google.com/docs/functions/http-events

Call GCFunctions thru http (for fetch) : https://firebase.google.com/docs/functions/http-events

反应获取(URL，{})

React fetch(URL, {})

async componentDidMount() {
    //console.log(this.props.profile)
    //this.setState({ posterOptions: this.props.profile.pages.unshift('post as myself')})
    //const seatsioid = this.props.profile.id;
    await fetch(
      "https://us-central1-foldername.cloudfunctions.net/function",
      {
        method: "POST",
        credentials: "include",
        headers: {
          "Content-Type": "Application/JSON",
          "Access-Control-Request-Method": "POST"
        },
        body: JSON.stringify({ seatsioid: this.props.profile.id }),
        maxAge: 3600
        //"mode": "cors",
      }
    )
      .then(response => response.json())
      .then(body => {
        console.log(body);
        //const reader = response.body.getReader()
        //reader.read().then(value => {
        //console.log(value);
        this.setState({
          allCharts: body.couple[0].charts,
          secretKey: body.couple[0].secretKey
        });
      })
      .catch(err => console.log(err));
}

Google Cloud Function

Google Cloud Function

const functions = require("firebase-functions");
const { SeatsioClient } = require("seatsio");
const cors = require("cors")({
  origin: true,
  allowedHeaders: [
    "Access-Control-Allow-Origin",
    "Access-Control-Allow-Methods",
    "Content-Type",
    "Origin",
    "X-Requested-With",
    "Accept"
  ],
  methods: ["POST", "OPTIONS"],
  credentials: true
});

exports.listCharts = functions.https.onRequest((req, res) => {
  // Google Cloud Function res.methods
  res.set("Access-Control-Allow-Headers", "Content-Type");
  res.set("Content-Type", "Application/JSON");
  // CORS-enabled req.methods, res.methods
  return cors(req, res, async () => {
    res.set("Content-Type", "Application/JSON");
    var origin = req.get("Origin");
    var allowedOrigins = [
      "https://www.yoursite.blah",
      "https://yoursite2.blah"
    ];
    if (allowedOrigins.indexOf(origin) > -1) {
      // Origin Allowed!!
      res.set("Access-Control-Allow-Origin", origin);
      if (req.method === "OPTIONS") {
        // Method accepted for next request
        res.set("Access-Control-Allow-Methods", "POST");
        //SEND or end
        return res.status(200).send({});
      } else {
          // After req.method === 'OPTIONS' set ["Access-Control-Allow-Methods": "POST"]
          // req.method === 'POST' with req.body.{name} => res.body.{name}
          // req.method === 'PUT' with req.body.{name}, no res.body.{name}
        let couple = [];
        if (req.body.seatsioid) {
          const seatsioid = req.body.seatsioid;
          let clientAdmin = new SeatsioClient("YOUR_ADMIN_KEY");
          let subaccountInfo = await clientAdmin.subaccounts.retrieve(seatsioid);
          let secretKey = subaccountInfo.secretKey;
          let charts = [];
          let clientUser = new SeatsioClient(secretKey);
          for await (let chart of clientUser.charts.listAll()) {
            charts.push(`chart":"${chart.key}`);
          }
          couple = [
            {
              charts: charts,
              secretKey: secretKey
            }
          ];
          //SEND or end
          res.status(200).send({ couple });
        } else {
          //SEND or end
          res.status(400).send("No seatsioid defined!");
        }
      }
    } else {
      //Origin Bad!!
      //SEND or end
      return res.status(400).send("no access for this origin");
    }
  });
});

具有1500点代表的人可能应该为其他用户添加seatio标记来代替reactjs或javascript

Someone with 1500 rep points should maybe add the seatsio tag in replace of reactjs or javascript for their other users, thanks

这篇关于React Fetch Google Cloud Function http cors req.method选项，开机自检的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！