本地部署AWS CHIME Demo切换主机IP后遇addEventListener未定义等错误求助

Hey there, let's break down what's happening and how to fix these issues you're seeing when you change the host in server.js from 127.0.0.1:8080 to your local IP.

What's Causing the Errors? #

The two errors you're getting are linked:

• Unable to find meeting: This is almost certainly a same-origin policy issue. When you switch to your local IP, the frontend's request origin doesn't match the backend's configured host anymore. AWS Chime's auth flow relies on consistent URLs between frontend and backend, so this mismatch breaks the meeting authorization or lookup.
• Cannot read property 'addEventListener' of undefined: This is a secondary problem. If the meeting fails to load, the related UI elements that the code tries to attach event listeners to never get rendered. When the code looks for those elements, it gets undefined and throws this error.

Step-by-Step Fixes #

1. Sync Frontend and Backend URLs #

First, make sure your frontend is pointing to the correct backend IP. If your frontend code uses hardcoded references to 127.0.0.1:8080 (like in fetch calls or API endpoints), replace that with your local IP (e.g., 192.168.1.100:8080). If you're using environment variables, update those too so the frontend knows where to reach the backend.

2. Configure CORS for Your Local IP #

Your backend needs to allow cross-origin requests from your frontend's local IP address. Add this CORS middleware to your server.js (assuming you're using Express):

const express = require('express');
const app = express();

// Add CORS configuration
app.use((req, res, next) => {
  // Replace with your frontend's IP and port (e.g., http://192.168.1.100:3000)
  res.header('Access-Control-Allow-Origin', 'http://YOUR_LOCAL_IP:FRONTEND_PORT');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  
  // Handle preflight OPTIONS requests
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

// Rest of your server code...
const host = "YOUR_LOCAL_IP:8080";

3. Verify AWS Chime Meeting Configuration #

When creating meetings with the AWS Chime SDK, ensure any callback URLs, meeting host IDs, or auth-related settings match your local IP. If the backend generates meeting links or tokens tied to 127.0.0.1, those won't work when accessing via your local IP—update those references to use your actual local IP.

4. Fix the DOM Event Listener Error #

Wrap your event listener code in a check to make sure the DOM element exists, and run it after the DOM is fully loaded:

document.addEventListener('DOMContentLoaded', () => {
  const targetElement = document.getElementById('YOUR_ELEMENT_ID');
  if (targetElement) {
    targetElement.addEventListener('click', () => {
      // Your existing event logic here
    });
  } else {
    console.log('Target UI element not found—likely due to meeting load failure');
  }
});

This prevents the undefined error by checking for the element first, and gives you a clearer log message if the issue is tied to the meeting load failure.

How to Test #

1. Restart your backend server to apply the server.js changes.
2. Access your frontend using your local IP (e.g., http://192.168.1.100:FRONTEND_PORT).
3. Try creating or joining a meeting—you should no longer see the "Unable to find meeting" error.
4. Check your browser's console to confirm the DOM error is gone too.

内容的提问来源于stack exchange，提问作者PHP buddy