Laravel/Vuejs和Pusher未连接到Heroku上的私有通道

Question

我有一个laravel/vuejs实时应用程序，可以在我的本地环境中工作，但当我部署到heroku /auth/broadcast时，会显示异常响应，bootstrap.js

window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest',
    'X-CSRF-TOKEN': window.csrf_token
};
const JWTtoken = `Bearer ${localStorage.getItem('access_token')}`

import Echo from 'laravel-echo';
// import Pusher from 'pusher-js';

window.Pusher = require('pusher-js');

Pusher.logToConsole = true;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true,
    encrypted: true,
    auth: {
        headers: {
            'Authorization' : JWTtoken,
        }
    }
});

在vue.js组件中

 Echo.private(`App.User.${this.user.id}`)
      .notification((notification) => {
       console.log(notification.type)
   });

来自本地环境的响应(成功)

Pusher :  : ["Event sent",{"event":"pusher:subscribe","data":{"auth":"0d5290e189b56045e99d:e2156d7e13673a1e06f0c2b8974655247a55055de1f7eb31022a1a171615cb8c","channel":"private-App.User.4"}}]

broadcasting/auth response from local environment

来自heroku上的broadcasting/auth的错误

Pusher :  : ["Error: JSON returned from auth endpoint was invalid, yet status code was 200. Data was: "]

Error pusher broadcasting/auth

任何帮助或建议。谢谢

Answer 1

身份验证端点响应应该是一个JSON字符串，其身份验证属性值由应用程序密钥和身份验证签名组成，用冒号:分隔，如下所示：

{
  "auth": "278d425bdf160c739803:58df8b0c36d6982b82c3ecf6b4662e34fe8c25bba48f5369f135bf843651c3a4"
}

您应该检查auth端点返回的内容。

Source