Question

我有这个角度代码来获取数据

Failed to load https://us-central1-site-*****.cloudfunctions.net/**/GetAll****: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://site-******.firebaseapp.com' is therefore not allowed access.

控制台中的错误是

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <div>
    <ul class="nav nav-tabs nav-justified">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#tab1">tab1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab2">tab2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab3">tab3</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">tabs</a>
        <div class="dropdown-menu dropdown-menu-center">
          <a class="dropdown-item" href="#tab1">tab1</a>
          <a class="dropdown-item" href="#tab2">tab2</a>
          <a class="dropdown-item" href="#tab3">tab3</a>
        </div>
      </li>
    </ul>
  </div>
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane container fade show active" id="tab1">
      <div class="row">
        <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xs-12">
          <h3>tab1</h3>
        </div>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane container fade" id="tab2">
      <div class="row">
        <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xs-12">
          <h3>tab2</h3>
        </div>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane container fade" id="tab3">
      <div class="row">
        <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xs-12">
          <h3>tab3</h3>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

请任何人可以帮助我

Answer 1

在发送响应之前，只需在云功能中添加以下行，因为您需要启用 CORS ：

function foo(req, res) {  
  res.set('Access-Control-Allow-Origin', "*");
  res.set('Access-Control-Allow-Methods', 'GET, POST');
  res.set('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token'); // <-- Try adding this line
  res.status(200).send('custom message');
}

Answer 2

我有同样的问题，但是当我尝试的时候。通常，发生此错误的原因是，当您尝试访问“ http”到“ https”时，出于安全原因，浏览器将阻塞。您要做的是，使用如下所示的cors

第1步：首先在Firebase功能中使用npm安装cors。

第2步：安装cors后，按以下方式编写函数

const cors = require('cors')({ origin: true }); // origin true must be there
exports.sampleFunction = functions.https.onRequest((request, response)=>{
   cors(request,response, () =>{
       // Do your business logic or code.
   })
})

如何在Firebase上使用已部署的应用程序和已部署的功能存储数据

2 个答案: