首次配置生产环境Socket.io遇CORS问题，报Provisional headers are shown错误

Hey there, let's work through this Socket.io issue you're hitting in production. That "Provisional headers are shown" error is a clear clue your browser's request isn't getting a proper response from the server—either it's being blocked, routing is misconfigured, or your CORS/WebSocket setup isn't production-ready. Let's break this down step by step:

1. Fix Your Socket.io Server CORS Configuration #

First off, if you're using Socket.io v3 or newer, the origins option is deprecated—you need to use the cors object instead. Also, double-check that your allowed_header variable is actually set to https://websiteName.com in production (no typos, no missing https://).

Update your server code like this:

// index.js
const io = require('socket.io')({
  cors: {
    origin: process.env.NODE_ENV === 'production' ? 'https://websiteName.com' : 'http://localhost:8080',
    methods: ["GET", "POST"],
    credentials: true // Enable this if your client needs to send cookies or auth tokens
  }
});

// app.js
app.io.attach(server);

Pro tip: If your allowed_header already includes the production domain, swap that in for the hardcoded URL—just make sure it's an exact, full match (no trailing slashes, correct HTTP/HTTPS).

2. Update Nginx to Support WebSocket #

Nginx's default config doesn't handle WebSocket upgrade requests, which Socket.io relies on for persistent connections. This is almost certainly a key culprit here. Add specific rules for the /socket.io/ path in your Nginx server block:

server {
    listen 443 ssl;
    server_name websiteName.com;

    # Keep your existing SSL certificate config here
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    # Forward regular HTTP requests to your Node.js server
    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Critical: Handle Socket.io WebSocket upgrade requests
    location /socket.io/ {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        # Keep WebSocket connections alive longer to avoid premature disconnections
        proxy_connect_timeout 7d;
        proxy_send_timeout 7d;
        proxy_read_timeout 7d;
    }
}

Why this matters? Socket.io uses the /socket.io/ path by default, and WebSocket requires an HTTP 1.1 "Upgrade" request. Nginx won't handle this automatically—you have to explicitly tell it to forward those headers and upgrade the connection.

3. Tweak Your Client Configuration #

Make sure your process.env.SOCKET_ADDRESS in production is just https://websiteName.com—don't include the :8080 port! Nginx listens on port 443 (HTTPS default) and will forward requests to your Node.js server on 8080 internally. If you add the port, your client will try to connect directly to 8080, which is likely blocked by firewalls or Nginx rules.

Update your client code:

// Production SOCKET_ADDRESS = "https://websiteName.com"
const socket = io(process.env.SOCKET_ADDRESS, {
  transports: ['websocket', 'polling'] // Prioritize WebSocket to avoid polling-related CORS issues
});

4. Verify the Fix #

1. Reload Nginx to apply the new config: sudo nginx -s reload
2. Restart your Node.js server
3. Open your browser's DevTools > Network tab, filter for socket.io requests. You should see a request with status code 101 Switching Protocols—that means the WebSocket handshake succeeded.
4. If you still get CORS errors, check the exact error message in the console—it'll tell you if there's an origin mismatch (e.g., you're using www.websiteName.com but allowed websiteName.com).

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