Question

我构建了一个React应用，并将其部署在Firebase上。每当用户搜索时，我都会收到此错误。

Failed to load https://food2fork.com/api/search?key=0882376145a8bcae6c3cee&q=fish&count=50: Redirect from
    'https://food2fork.com/api/search?key=0882376145a8107c5946c3cee&q=fish&count=50' to
    'https://www.food2fork.com/api/search
    key=0882376145a8bcae390107c5946c3cee&q=fish&count=50'
    has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is 
present on the requested resource. Origin 'https://recipe-finder-26e0e.firebaseapp.com' is therefore not allowed access.

由于这是我的新手，所以我无法弄清楚如何在firebase中启用CORS，我认为这是问题所在。如果有人可以告诉我如何启用CORS，我将不胜感激。

编辑：源代码链接-> https://github.com/AdiBev/Recipe-Finder

更新：我一开始并不了解CORS需要由后端处理。感谢@Ben。 Ayoub向我解释了这一点。

如果它对像我这样遇到同样问题的其他人有帮助，我会找到一篇出色的文章，并在其中提到一些代理。链接---> https://gist.github.com/jesperorb/6ca596217c8dfba237744966c2b5ab1e

Answer 1

除了Ben. Ayoub的解决方案之外，如果您只是尝试与功能进行通信的应用程序，并且不属于更广泛的外部API的一部分，那么您可能值得研究HTTPS Callable函数。

它们的工作方式类似于HTTPS终结点，但摆脱了CORS的麻烦。

import * as functions from 'firebase-functions';

export const listener = functions.https.onCall((data, context) => {
  if (data) {
    throw new functions.https.HttpsError('invalid-argument');
  }

  return {
    some: 'json',
  };
}

您不需要像HTTP端点云功能中那样使用request和response参数。

它接受context形式的JSON，并返回一个简单的JSON对象。

修改

要回答您的原始问题，云功能可以利用CORS

import * as functions from 'firebase-functions';

const cors = require('cors')({ origin: true });

export const listener = functions.https.onRequest((req, res) => {
  cors(req, res, () => {
    return;
  });

  // cloud function logic

  res.json({ some: 'json' });
});

Firebase CORS问题

1 个答案: