Cordova浏览器端应用对接Express服务器时CORS问题求助

Hey there, let's figure out why Safari is throwing CORS errors even after you've set up CORS on your Express server. I've dealt with similar headaches using Cordova + Safari before, so here are the most common fixes to walk through:

It's easy to miss a critical config flag that Safari cares about. Let's make sure your CORS setup covers all bases:

If you're using the cors npm package: #

Update your middleware to explicitly allow your Cordova app's origin, support credentials (if needed), and whitelist all required methods/headers:

const cors = require('cors');

app.use(cors({
  origin: 'http://localhost:3000', // Replace with your Cordova dev server port
  credentials: true, // Required if your request sends cookies/auth tokens
  methods: ['GET', 'POST', 'OPTIONS', 'PUT', 'DELETE'], // Include OPTIONS for preflight
  allowedHeaders: ['Content-Type', 'Authorization'] // Whitelist any custom headers you use
}));

If you're handling CORS manually: #

Don't forget to explicitly respond to OPTIONS preflight requests—Safari is strict about this:

// Handle preflight OPTIONS requests for all routes
app.options('*', (req, res) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.sendStatus(200);
});

// Apply CORS headers to regular requests
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Credentials', 'true');
  next();
});

Cordova's default CSP in index.html might be blocking cross-origin requests without you realizing it. Update the meta tag to explicitly allow connections to your Express server:

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self' http://localhost:5000 data: gap: https://ssl.gstatic.com 'unsafe-eval';
  style-src 'self' 'unsafe-inline';
  media-src *;
  connect-src http://localhost:5000; <!-- Add your Express server URL here -->
">

Replace http://localhost:5000 with your actual Express server address. Avoid using * for connect-src if possible—Safari can be picky about wildcard permissions.

Make sure your Fetch request matches your server's CORS settings:

• If you enabled credentials: true on the server, add credentials: 'include' to your Fetch options (this tells Safari to send cookies/auth tokens cross-origin):

fetch('http://localhost:5000/your-api-route', {
  method: 'GET',
  credentials: 'include', // Required if server allows credentials
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (!response.ok) throw new Error('Network response was not ok');
  return response.json();
})
.catch(error => console.error('Fetch failed:', error));

• Avoid using custom headers unless you've explicitly whitelisted them in your CORS config—Safari will trigger a preflight request and fail if the header isn't allowed.

Safari has a few oddities that can trip you up:

• Preflight caching: Safari caches preflight OPTIONS responses aggressively. If you made changes to your CORS config, restart Safari or clear its cache (Develop > Empty Caches) to test the new settings.
• localhost vs 127.0.0.1: Sometimes Safari treats localhost differently than 127.0.0.1. Try swapping your server URL to use http://127.0.0.1:5000 instead of localhost to see if that fixes it.
• Response content type: Ensure your Express route returns a valid application/json Content-Type header. If it's sending text/plain or an incorrect type, Safari might reject the response even if CORS is set up correctly.

Start with the first two fixes—they're the most common culprits. If you're still stuck, check the exact error message in Safari's console (it usually gives hints about missing headers or preflight failures) and adjust your config accordingly.

内容的提问来源于stack exchange，提问作者Nikola Stojaković