# Join\_Meeting\_Failed on Vue Sample App

**URL:** <https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534>\
**Category:** Web\
**Created:** [February 26, 2024, 10:56am UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534 "2024-02-26T10:56:34Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![AaronH](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@AaronH](https://devforum.zoom.us/u/AaronH)\
**Post date:** [February 26, 2024, 10:56am UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/1 "2024-02-26T10:56:34Z")

</div>

**Description**  
Trying to setup the Vue sample app using component view. The app compiles but I am unable to join the meeting I created in the Zoom console.

**Browser Console Error**  
{  
“type”: “JOIN\_MEETING\_FAILED”,  
“reason”: “connection error”,  
“errorCode”: -3000  
}

**Which Web Meeting SDK version?**  
3.1.6

**Meeting SDK Code Snippets**

```auto
<script setup>
import ZoomMtgEmbedded from '@zoom/meetingsdk/embedded';

const props = defineProps({
  meetingNumber: {
    type: String,
    required: true
  },
  passWord: {
    type: String,
    required: false,
    default: ''
  },
  role: {
    type: Number,
    required: false,
    default: 0
  },
  userName: {
    type: String,
    required: false,
    default: 'Student'
  },
  userEmail: {
    type: String,
    required: false,
    default: ''
  },
  registrantToken: {
    type: String,
    required: false,
    default: ''
  },
  zakToken: {
    type: String,
    required: false,
    default: ''
  },
    leaveUrl: {
        type: String,
        required: false,
        default: 'https://tesoldegreethailand.com/dashboard'
    }
})

var client = ZoomMtgEmbedded.createClient()
var authEndpoint = 'https://auth.tesoldegreethailand.com/'
var sdkKey = 'ODJw3lb0Ro6iLRcGEP5uKQ'
var meetingNumber = props.meetingNumber
var passWord = props.passWord
var role = props.role
var userName = props.userName
var userEmail = props.userEmail
var registrantToken = props.registrantToken
var zakToken = props.zakToken
var leaveUrl = props.leaveUrl

function getSignature() {
  fetch(authEndpoint, {
    method: 'POST',
    body: JSON.stringify({
      meetingNumber: meetingNumber,
      role: role
    })
  }).then((response) => {
    return response.json()
  }).then((data) => {
    console.log(data)
    startMeeting(data.signature)
  }).catch((error) => {
    console.log(error)
  })
}

function startMeeting(signature) {
  let meetingSDKElement = document.getElementById('meetingSDKElement');

  client.init({zoomAppRoot: meetingSDKElement, language: 'en-US', patchJsMedia: true}).then(() => {
    client.join({
      signature: signature,
      sdkKey: sdkKey,
      meetingNumber: meetingNumber,
      password: passWord,
      userName: userName,
      userEmail: userEmail,
      tk: registrantToken,
      zak: zakToken
    }).then(() => {
      console.log('joined successfully')
    }).catch((error) => {
      console.log(error)
    })
  }).catch((error) => {
    console.log(error)
  })
}
</script>

```

**Device (please complete the following information):**

- PC
- Windows 11
- Chrome
- 122.0.6261.70 (Official Build) (64bit)]

**Additional context**  
I’m getting lots of cross-origin cookie warnings due to the fact that Chrome is now blocking 3rd party cookies with same-site: none

Also got an error Cross-Origin Read Blocking when accessing this path /api/v1/wc/info?apiKey=ODJw3lb0Ro6iLRcGEP5uKQ&signatureType=sdk&signature=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZGtLZXkiOiJPREp3M2xiMFJvNmlMUmNHRVA1dUtRIiwiaWF0IjoxNzA4OTQzNTQ0LCJleHAiOjE3MDg5NTA3NDQsImFwcEtleSI6Ik9ESnczbGIwUm82aUxSY0dFUDV1S1EiLCJ0b2tlbkV4cCI6MTcwODk1MDc0NH0.\_tTG77IB5Kdjf1jFl62ViGZPBw51ZOcWqiNNIFWvZwU&userName=Aaron+Travis+Harker&lang=en-US&passWord=&userEmail=classroom1%40puie.ac&customerKey=&sdkUrl=aHR0cHM6Ly90ZXNvbGRlZ3JlZXRoYWlsYW5kLmNvbS9hZG1pbi9jbGFzc3Jvb20vMTAx&sdkOrigin=aHR0cHM6Ly90ZXNvbGRlZ3JlZXRoYWlsYW5kLmNvbQ&proxy=1&ulsm=0&cv=3.1.0&callback=zoomsdkjsonpcallback1

---

<div class="post-metadata">

**Author:** ![AaronH](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@AaronH](https://devforum.zoom.us/u/AaronH)\
**Post date:** [February 27, 2024, 12:38pm UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/4 "2024-02-27T12:38:33Z")

</div>

I should also mention I’m using the Heroku app to generate the JWT signature and that the Vue component is correctly receiving the signature from Heroku.

I do believe the issue stems from the CORB error -

```auto
The resource from “https://zoom.us/api/v1/wc/info?apiKey=ODJw3lb0Ro6iLRcGEP5uKQ&signatureType=sdk&signature=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZGtLZXkiOiJPREp3M2xiMFJvNmlMUmNHRVA1dUtRIiwiaWF0IjoxNzA5MDM2NzQ2LCJleHAiOjE3MDkwNDM5NDYsImFwcEtleSI6Ik9ESnczbGIwUm82aUxSY0dFUDV1S1EiLCJ0b2tlbkV4cCI6MTcwOTA0Mzk0Nn0.gY1VmOvZs5t6x-P49VGuzu5Sod8a48dv1k7PeynEHeM&userName=Aaron+Travis+Harker&lang=en-US&passWord=&userEmail=classroom1%40puie.ac&customerKey=&sdkUrl=aHR0cHM6Ly90ZXNvbGRlZ3JlZXRoYWlsYW5kLmNvbS9hZG1pbi9jbGFzc3Jvb20vMTAx&sdkOrigin=aHR0cHM6Ly90ZXNvbGRlZ3JlZXRoYWlsYW5kLmNvbQ&proxy=1&ulsm=0&cv=3.1.0&callback=zoomsdkjsonpcallback1” was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff).

```

---

<div class="post-metadata">

**Author:** ![AaronH](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@AaronH](https://devforum.zoom.us/u/AaronH)\
**Post date:** [February 28, 2024, 2:31am UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/5 "2024-02-28T02:31:47Z")

</div>

OK just an update, I have tested on edge and Firefox and get the same result.

One thing I noticed on Chrome it says the 3rd party cookies will be blocked in the future , so I hadn’t worried about the errors they are throwing but Firefox already seems to be blocking them.

So any cookie supplied with `samesite = none` is being blocked unless it includes the new partitioned tag, which none of Zooms appear to do.

---

<div class="post-metadata">

**Author:** ![AaronH](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@AaronH](https://devforum.zoom.us/u/AaronH)\
**Post date:** [February 29, 2024, 11:31pm UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/6 "2024-02-29T23:31:28Z")

</div>

Can anyone just give me a hint what this error code means?

---

<div class="post-metadata">

**Author:** ![AaronH](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@AaronH](https://devforum.zoom.us/u/AaronH)\
**Post date:** [March 2, 2024, 10:30pm UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/7 "2024-03-02T22:30:15Z")

</div>

So after 5days no one can even tell me where I can find an error list to work out why this is not working???

---

<div class="post-metadata">

**Author:** ![AaronH](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@AaronH](https://devforum.zoom.us/u/AaronH)\
**Post date:** [March 2, 2024, 10:35pm UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/8 "2024-03-02T22:35:16Z")

</div>

@chunsiong.zoom any idea what error code -3000 means?

---

<div class="post-metadata">

**Author:** ![chunsiong.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/chunsiong.zoom/32/35488_2.png) [@chunsiong.zoom](https://devforum.zoom.us/u/chunsiong.zoom)\
**Post date:** [March 4, 2024, 3:22am UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/9 "2024-03-04T03:22:27Z")

</div>

@AaronH

You are probably missing additional key value in your token

right now it has these values  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/5/f/5f4a1e1a889edd5cc230e3d09193c118f470335b.png)

Since you are using web, you will need [mn (meeitng number) and role](https://developers.zoom.us/docs/meeting-sdk/auth/) as well

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/d/a/da0fbf7456aa6b192a1d17542510fc1b10c85ce5.png)

---

<div class="post-metadata">

**Author:** ![AaronH](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@AaronH](https://devforum.zoom.us/u/AaronH)\
**Post date:** [March 5, 2024, 4:23am UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/10 "2024-03-05T04:23:02Z")

</div>

@chunsiong.zoom  
I’m using the Heroku app to generate the token - [GitHub - zoom/videosdk-auth-endpoint-sample: Generate a Video SDK JWT to join Zoom Video SDK sessions with the Video SDK.](https://github.com/zoom/videosdk-auth-endpoint-sample)

and as per the Vue example app I’m sending the meetingNumber and role when generating the JWT token as you can see below

```auto
const props = defineProps({
  meetingNumber: {
    type: String,
    required: true
  },
  role: {
    type: Number,
    required: true,
    default: 0
  },
  ......
})

var meetingNumber = props.meetingNumber
var role = props.role

function getSignature() {
  fetch(authEndpoint, {
    method: 'POST',
    body: JSON.stringify({
      meetingNumber: meetingNumber,
      role: role
    })
  }).then((response) => {
    return response.json()
  }).then((data) => {
    console.log(data)
    startMeeting(data.signature)
  }).catch((error) => {
    console.log(error)
  })
}

```

To keep things concise I’ve removed extra props

---

<div class="post-metadata">

**Author:** ![chunsiong.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/chunsiong.zoom/32/35488_2.png) [@chunsiong.zoom](https://devforum.zoom.us/u/chunsiong.zoom)\
**Post date:** [March 5, 2024, 4:41am UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/11 "2024-03-05T04:41:21Z")

</div>

@AaronH ,

The JWT token shared on top doesn’t include the meeting number and role.

When doing your HTTP POST, you might need to specify the application/json for the mime type

---

<div class="post-metadata">

**Author:** ![AaronH](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@AaronH](https://devforum.zoom.us/u/AaronH)\
**Post date:** [March 5, 2024, 7:37am UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/12 "2024-03-05T07:37:44Z")

</div>

@chunsiong.zoom How can I tell if the token includes meeting number and role?

---

<div class="post-metadata">

**Author:** ![chunsiong.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/chunsiong.zoom/32/35488_2.png) [@chunsiong.zoom](https://devforum.zoom.us/u/chunsiong.zoom)\
**Post date:** [March 5, 2024, 7:48am UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/13 "2024-03-05T07:48:54Z")

</div>

@AaronH use [jwt.io](http://jwt.io) to look at the token, it will break it down for you

---

<div class="post-metadata">

**Author:** ![AaronH](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@AaronH](https://devforum.zoom.us/u/AaronH)\
**Post date:** [March 5, 2024, 7:49am UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/14 "2024-03-05T07:49:39Z")

</div>

@chunsiong.zoom Thanks, I’ll have a dig at what is going on then.

---

<div class="post-metadata">

**Author:** ![AaronH](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@AaronH](https://devforum.zoom.us/u/AaronH)\
**Post date:** [March 5, 2024, 10:05am UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/15 "2024-03-05T10:05:15Z")

</div>

@chunsiong.zoom is there somewhere I can find a list of error codes? I’ve got the meeting number and role sorted but now I’m getting an invalid signature error with errorCode 3712. I’m guessing it is because the meeting I setup for testing has probably expired or something and will try creating a new meeting. Just would be nice to know where I can find a list of these codes.

---

<div class="post-metadata">

**Author:** ![chunsiong.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/chunsiong.zoom/32/35488_2.png) [@chunsiong.zoom](https://devforum.zoom.us/u/chunsiong.zoom)\
**Post date:** [March 5, 2024, 10:32am UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/16 "2024-03-05T10:32:02Z")

</div>

@AaronH 3712 means signature is invalid.

Did you put in the mime type as application/json when calling the endpoint? The below is missing the type.

function getSignature() {  
fetch(authEndpoint, {  
method: ‘POST’,  
body: JSON.stringify({  
meetingNumber: meetingNumber,  
role: role  
})

I encountered the same issue before.

---

<div class="post-metadata">

**Author:** ![AaronH](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@AaronH](https://devforum.zoom.us/u/AaronH)\
**Post date:** [March 5, 2024, 10:53am UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/17 "2024-03-05T10:53:57Z")

</div>

@chunsiong.zoom I actually changed from using fetch to using axios. I’m already using it in the rest of my app and I find it easier to work with.

```auto
function getSignature() {
  axios.post(authEndpoint, {
    meetingNumber: meetingNumber,
    role: role
  }, {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then((response) => {
    console.log(response.data.signature)
    startMeeting(response.data.signature)
  }).catch((error) => {
    console.log(error)
  })
}

```

---

<div class="post-metadata">

**Author:** ![AaronH](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@AaronH](https://devforum.zoom.us/u/AaronH)\
**Post date:** [March 5, 2024, 4:20pm UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/18 "2024-03-05T16:20:45Z")

</div>

@chunsiong.zoom Got it working thanks. I had production keys in the Signature generator and dev keys in the app.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [April 5, 2024, 2:20am UTC](https://devforum.zoom.us/t/join-meeting-failed-on-vue-sample-app/104534/19 "2024-04-05T02:20:47Z")

</div>

Closed on April 5, 2024, 2:20am UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.