Node/React生产环境路由刷新触发CSP内联脚本错误及CORS问题求助

Hey there, let's break down your problem step by step and figure out how to fix it!

1. Core Issue: Blank Page on Refresh + CSP Inline Script Error #

First, let's tackle the two linked problems here—your SPA routing fallback and the Content Security Policy (CSP) violation.

Why non-root routes break on refresh #

Single-page apps (like your React app) use client-side routing. When you refresh a non-root route (e.g., /dashboard), your server doesn't recognize that path and tries to return a 404 page instead of serving your index.html. This leads to the blank page, and often triggers CSP errors because the server isn't loading the correct app resources.

Fix this first with server-side fallback configuration:

• If you're using Express (Node.js):

  const express = require('express');
  const path = require('path');
  const app = express();
  
  // Serve static build files
  app.use(express.static(path.join(__dirname, 'build')));
  
  // Catch all routes and return index.html
  app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
  });
  
  app.listen(process.env.PORT || 3000);
  

• If you're using Nginx:
  Add this to your server block:

  location / {
    try_files $uri $uri/ /index.html;
  }
  

• For Apache:
  Enable mod_rewrite and add this to your .htaccess:

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

Why INLINE_RUNTIME_CHUNK=false didn't work #

This environment variable disables Create React App's inline runtime chunk, which should eliminate the inline script triggering your CSP error. But it might not have taken effect if:

• You didn't add it correctly to your package.json build script. Fix it like this:

  "scripts": {
    "build": "INLINE_RUNTIME_CHUNK=false react-scripts build"
  }
  

• On Windows, environment variables are set differently—this is where cross-env comes in (more on that below). Try updating the script to:

  "scripts": {
    "build": "cross-env INLINE_RUNTIME_CHUNK=false react-scripts build"
  }
  

After rebuilding, check your build/index.html—there should be no inline <script> tags left.

If CSP errors still persist #

If you still see inline scripts, they might come from third-party libraries or custom code in your public/index.html. You have two options:

1. Use the hash provided in your error message: Add it to your CSP header's script-src directive:

   Content-Security-Policy: script-src 'self' 'sha256-eE1k/Cs1U0Li9/ihPPQ7jKIGDvR8fYw65VJw+txfifw=';
   

2. Use a nonce: Generate a random nonce on your server, add it to your inline <script> tags (e.g., <script nonce="YOUR_RANDOM_NONCE">), and include 'nonce-YOUR_RANDOM_NONCE' in your CSP script-src.

2. Understanding cross-env & Its CORS Side Effect #

cross-env is just a tool to set environment variables consistently across Windows, macOS, and Linux. It doesn't directly fix CSP or routing issues—its only job is to make commands like INLINE_RUNTIME_CHUNK=false work everywhere.

Why did it trigger CORS?

• You probably set an environment variable (like REACT_APP_API_URL) with cross-env that points to an API domain different from your frontend's domain. Browsers block cross-origin requests by default unless the API server allows your frontend's origin via CORS headers.
• If you're using this in development, Create React App has a built-in proxy feature: Add "proxy": "https://your-api-domain.com" to your package.json to avoid CORS issues during local development. For production, you'll need to either:
  • Deploy your frontend and API on the same domain/subdomain
  • Configure your API server to send Access-Control-Allow-Origin headers allowing your frontend's domain

Next Steps #

If these fixes don't resolve your issue, share the following details for more targeted help:

• Your server configuration (Express/Nginx/Apache code/config)
• The scripts section of your package.json
• Any custom CSP headers you're setting
• Your public/index.html content

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