iT邦幫忙

0

如何把Firebase的CDN放入JS裡面

  • 分享至 

  • xImage

小弟目前的作法是將官方給的CDN整份丟到JS裡面
在HTML端用script去呼叫CDN
但是會被CORS的規範擋下來,自己找到的資料都是V8的居多
想上來詢問有沒有另類的解決方法呢
https://ithelp.ithome.com.tw/upload/images/20230203/20141578aI4rGXs7BJ.jpg

froce iT邦大師 1 級 ‧ 2023-02-04 08:05:32 檢舉
在後端設定CORS的相關header或乾脆把js下載下來自己放在自己同一domain的站
fillano iT邦超人 1 級 ‧ 2023-02-06 13:01:40 檢舉
https://cdnjs.com/libraries/firebase
如果是從cdnjs,他已經幫你處理好cors標頭。
llkui iT邦新手 5 級 ‧ 2023-02-06 14:01:47 檢舉
感謝各位大大的回覆,小弟最後是選擇放棄V9,用V8的方式去抓資料
原本是有嘗試去把檔案下載下來,但是他V9的database.js裡面我程度不夠不懂,也沒有排過版所以就沒使用了,最後我是在VSCode寫的^^
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
echochio
iT邦高手 1 級 ‧ 2023-02-04 10:40:37

在 Server 端處設定(抄apache , nginx 官方寫法) 去寫固定 js 去 CORS
還是只直接將 js 拉回放到 Server 端同一個域名

Apache

<IfModule mod_headers.c>
    <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

Nginx

location ~ \.(ttf|ttc|otf|eot|woff|font.css|css)$ {
    add_header Access-Control-Allow-Origin "*";
}
1
JamesDoge
iT邦高手 1 級 ‧ 2023-02-18 21:23:31

Firebase 的 CDN 被擋住的問題通常是因為跨源資源共用(CORS)的限制所導致。在這種情況下,你可以使用 Firebase 提供的 SDK,直接在你的 JavaScript 中引入 Firebase 功能。

首先,在 Firebase 控制台中建立一個專案,然後按照指示設定 Firebase。接著,在你的網站中引入 Firebase SDK,可以透過以下方式載入 Firebase:

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-app.js"></script>

<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-firestore.js"></script>

接著,在你的 JavaScript 中初始化 Firebase,如下所示:

// Your web app's Firebase configuration
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

在初始化 Firebase 之後,你就可以使用 Firebase SDK 中的各種功能了。例如,你可以使用 Firebase 身分驗證 API:

var provider = new firebase.auth.GoogleAuthProvider();

firebase.auth().signInWithPopup(provider).then(function(result) {
  // This gives you a Google Access Token. You can use it to access the Google API.
  var token = result.credential.accessToken;
  // The signed-in user info.
  var user = result.user;
  // ...
}).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
});

你可以透過這種方式,直接在你的 JavaScript 中引入 Firebase 功能,而不需要使用 Firebase CDN。

我要發表回答

立即登入回答