Socket.io 客户端在 Firebase 主机和服务器在 Heroku

Question

I've created an app that uses Angular for the front-end and node.js for the backend. I'm hosting the front-end on Firebase Hosting and the server on Heroku (because I read that Firebase Functions doesn't support socket.io).

In my socket.service.ts file, I connect to the socket using this.socket = io(environment.socket_url);( socket_url is http://localhost:3000/ for the development environment and https://PROJECT_NAME_HERE.herokuapp.com:3000 for production).

The socket connection in my server.ts file is:

const port = process.env.PORT || 3000;
const server = new http.Server(app);
const io = new Server(server, {
    cors: {
        origin: socketUrl,
        methods: ["GET", "POST"]
    }
});

where socketUrl is http://localhost:4200 when in development and https://PROJECT_NAME_HERE.web.app/ in production.

This setup works in development, but doesn't work in production. How do I get this to work?

EDIT: This is the error I get: Access to XMLHttpRequest at 'https://PROJECT_NAME_HERE.herokuapp.com/socket.io/?EIO=4&transport=polling&t=NPu1t39' from origin 'https://PROJECT_NAME_HERE.web.app' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://PROJECT_NAME_HERE.web.app/' that is not equal to the supplied origin.

I am also using app.use(cors({origin: true}));

Answer 1

Trouble isolation steps:

1. Replace origin in the CORS configuration with * and see if you receive the exact same error.

    cors: {
        origin: "*",
        methods: ["GET", "POST"]
    }

2. Explicitly set the origin of the CORS config to the Angular app URL and see if you get the same error:

    cors: {
        origin: "https://PROJECT_NAME_HERE.web.app",
        methods: ["GET", "POST"]
    }

If either of these produce the exact same error, you've missed a configuration parameter (probably credentials ). You'll need to determine which parameter you'll need to add from here .

Otherwise, you've not included enough details about additional or custom headers, pre-flight requirements, authentication (credentials/cookies), etc.