Node+React集成Facebook Passport认证时的CORS错误问题

Hey there! It sounds like you've got the basics locked in—separated React frontend (localhost:3000) and Node backend (localhost:5000) with a proxy for regular API calls—but Facebook's auth flow is throwing a wrench in things after authorization. Let's walk through the most common pitfalls and fixes for this setup:

1. Double-Check Your Facebook App's Callback URL #

Facebook needs explicit permission to redirect users back to your service, and this is where most folks slip up. Since your backend handles the auth handshake, your callback URL should point to your backend's auth endpoint, not your React frontend.

• Head to your Facebook Developer Dashboard → Select your app → Products → Facebook Login → Settings
• Add http://localhost:5000/auth/facebook/callback (or whatever your backend's callback route is) to the "Valid OAuth Redirect URIs" list.
• Pro tip: Don't skip the port number—localhost without a port defaults to 80, which won't match your backend's 5000.

2. Fix CORS & Redirect Logic Post-Authorization #

React's proxy works great for standard API calls, but it doesn't cover the full-page redirect flow from Facebook. Here's how to fix this:

• Use the cors middleware in your Node backend and explicitly allow http://localhost:3000 as an allowed origin. Example:

  const cors = require('cors');
  app.use(cors({ origin: 'http://localhost:3000', credentials: true }));
  

• After your backend verifies the Facebook auth code and fetches user data, don't send JSON directly—instead, redirect to a route in your React app (like http://localhost:3000/login-success) with a token or session info attached. For example:

  // In your backend callback route
  res.redirect(`http://localhost:3000/login-success?token=${generatedJwtToken}`);
  

• If you're using sessions, tweak your cookie settings to allow cross-port access: set domain: 'localhost', sameSite: 'Lax', and secure: false (since you're using HTTP locally).

3. Fix CSRF State Mismatches #

Facebook's auth flow uses a state parameter to prevent CSRF attacks, and this can break when frontend and backend are separated. Here's the proper way to handle it:

• Instead of generating the state in your React app, have your frontend first send a request to your backend to get a valid state value, store it in localStorage, then redirect to your backend's Facebook auth endpoint.
• If you're using Passport.js (super common for Node auth), make sure your session middleware is configured correctly—Passport relies on sessions to track the state between the initial auth request and the callback.

4. Stop Using React Proxy for Auth Redirects #

The proxy in package.json only forwards API requests from React to your backend—it won't handle full-page redirects like the Facebook auth flow. So instead of using an Axios/fetch call for your "Login with Facebook" button, just redirect the user directly to your backend's auth route:

// In your React component
const handleFacebookLogin = () => {
  window.location.href = 'http://localhost:5000/auth/facebook';
};

Example Working Flow #

1. User clicks "Login with Facebook" in React → Redirects to http://localhost:5000/auth/facebook
2. Backend redirects user to Facebook's authorization page
3. User approves → Facebook redirects back to http://localhost:5000/auth/facebook/callback
4. Backend verifies the auth code, fetches user data, generates a JWT
5. Backend redirects to http://localhost:3000/dashboard?token=your-jwt-token
6. React extracts the token from the URL, stores it, and uses it for future API calls

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