Question

我有一个Javascript Web应用程序。我尝试读取或写入Cloud Firestore数据库，但它在浏览器控制台中返回此错误。

错误：

无法加载https://firestore.googleapis.com/google.firestore.v1beta1.Firestore/Write/channel?VER=8&RID=21505&CVER=21&X-HTTP-Session-Id=gsessionid&%24httpHeaders=X-Goog-Api-Client%3Agl-js%2F%20fire%2F4.8.2%0D%0Agoogle-cloud-resource-prefix%3Aprojects%2FProjectName%2Fdatabases%2F(default)%0D%0A&zx=v9xcdtq156tr&t=1：
＆＃39; Access-Control-Allow-Origin＆＃39;标头的值为＆＃39; null＆＃39;这不等于提供的原产地。起源＆＃39; null＆＃39;因此不允许访问。

安全规则设置为公开读/写

service cloud.firestore {
  match /databases/{database}/documents {
   match /{document=**} {
     allow read, write;
   }
 }
}

这是我的测试代码

<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-firestore.js"></script>
<script>
  var config = {
    apiKey: "XXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXX",
    databaseURL: "XXXXXXXXXXXX",
    projectId: "XXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXX",
    messagingSenderId: "XXXXXXXXXXXX"
  };
  firebase.initializeApp(config);

  // Firebase Variables
  var db = firebase.firestore();

  db.collection("cities").doc("LA").set({
    name: "Los Angeles",
    state: "CA",
    country: "USA"
  }).then(function () {
    console.log("Document successfully written!");
  }).catch(function (error) {
    console.error("Error writing document: ", error);
  });
</script>

Answer 1

Google Chrome版本65.0.3325.162就是问题所在。使用Microsoft Edge进行测试并且可以正常使用

Answer 2

根据CORS错误，您似乎在运行测试代码而不使用任何类型的开发服务器（例如[Nodemon] [1]，[webpack-dev-server] [2]或[SimpleHTTPServer] [3 ]）。在过去，当使用没有任何HTTP服务器的浏览器直接打开index.html文件时，我也遇到了类似的错误。

如果您的计算机上安装了python，请尝试在包含索引HTML文件的目录中运行HTTP服务器。

mat-sidenav {
    background-color: gray;
    margin-top: 64px;
    color: #ffffff;
    transition: 0.5s;
    padding: 7px;
}

mat-sidenav a {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 17px;
    color: #ffffff;
    display: block;
}

mat-sidenav a:hover {
    color: #c41230;
    cursor: pointer;
}

.closeButton {
    text-align: right;
    margin-bottom: 15px;
    cursor: pointer;
}

.mat-drawer-container {
    position: static;
}

/* Moves the side-nav to below the main menu */
.mat-drawer-backdrop {
    margin-top: 64px !important;
}

Cloud Firestore的读/写错误：＆＃39; Access-Control-Allow-Origin＆＃39;标头的值为＆＃39; null＆＃39;

2 个答案: