为啥在 Vue js 中尝试从 firebase 检索令牌时出现错误?

Posted

技术标签:

【中文标题】为啥在 Vue js 中尝试从 firebase 检索令牌时出现错误?【英文标题】:Why I getting an error while trying to retrieving token from firebase in Vue js?为什么在 Vue js 中尝试从 firebase 检索令牌时出现错误? 【发布时间】:2018-11-15 03:37:13 【问题描述】:

我正在尝试在我的 vue.js 项目中实现 firebase,但在 firebase.messaging.getToken() 上出现错误。这是我的问题的截图

错误:

脚本具有不受支持的 MIME 类型('text/html')。

加载资源失败:net::ERR_INSECURE_RESPONSE

无法获得通知权限。

浏览器错误消息 : “注册 ServiceWorker 失败:脚本的 MIME 类型('text/html')不受支持。”

代码 : “消息传递/失败的服务工作者注册”

消息 : “消息传递:我们无法注册默认服务工作者。无法注册服务工作者:脚本具有不受支持的 MIME 类型('text/html')。(消息传递/失败的服务工作者注册)。”

堆栈 : “FirebaseError:消息传递:我们无法注册默认服务工作者。无法注册服务工作者:脚本具有不受支持的 MIME 类型('text/html')。(消息传递/失败的服务工作者注册)。↵ 在 eval( webpack-internal:///./node_modules/@firebase/messaging/dist/index.esm.js:1950:32)"

这是我的代码。

firebase.messaging().requestPermission().then(function () 
  console.log('Notification permission granted.')
  return firebase.messaging().getToken()
    .then(function (currentToken) 
      console.log(currentToken)
    )
).catch(function (err) 
  console.log('Unable to get permission to notify.', err)
)

服务工作者

有谁知道如何解决这个问题?我尝试了很多方法,但我无法弄清楚。你能帮帮我吗?

谢谢。

【问题讨论】:

您可以将错误添加为文本而不是图像吗?我没有带放大镜,所以无法阅读。 这里我将错误添加为文本。 @Reo93 能不能打开Chrome Dev Tools -> Application -> Service Worker 看看有没有注册过的Service Worker?如果是,请单击取消注册并再次刷新页面。 它未注册。我已经上传了问题中的图片。 我也面临同样的 MIME 类型不支持的问题 【参考方案1】:

尝试将文件(或创建文件)“firebase-messaging-sw.js”放在 /public 文件夹中

firebase-messaging-sw.js 中复制并粘贴此内容(并更改 YOUR-SENDER-ID):

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp(
  'messagingSenderId': 'YOUR-SENDER-ID'
);

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.

const messaging = firebase.messaging();

为我工作(使用 React)

【讨论】:

把它放在 create-react-app 的 /public 文件夹中对我有用。

以上是关于为啥在 Vue js 中尝试从 firebase 检索令牌时出现错误?的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js:从 Firebase 存储中检索数据后如何异步加载模板?

我的 Vue.js 应用程序中的 Firebase 集成问题

如何使用 Vue.js Firebase UID 删除用户

如何在 vue js 中显示从 firebase 检索到的标题标签 <h1> </h1> 的数据?

Firebase 和 Vue Js 生命周期钩子

Vue.js 和 Nuxt.js 中的 Firebase 存储 CORS 错误