Angular 5 HTTPClient/HTTPHeader预请求响应失败问题求助

Hey there, let's break down how to fix that preflight error when using the Google Contacts API with your Node backend. Preflight (OPTIONS) errors almost always boil down to CORS misconfiguration or issues with how you're handling the auth token, so let's go through the most likely fixes step by step:

Preflight requests are the browser's way of checking if your backend allows cross-origin requests from your frontend. If your server doesn't respond correctly to these OPTIONS requests, the browser will block the actual API call.

If you're using the cors npm package (the easiest way to handle CORS), update your configuration to explicitly allow the headers and methods needed for the Google Contacts API:

const cors = require('cors');
app.use(cors({
  origin: 'https://your-frontend-domain.com', // Replace with your actual frontend URL; use '*' only for local dev
  allowedHeaders: ['Authorization', 'Content-Type'],
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  credentials: true // Include this if you're passing auth-related cookies or tokens
}));

If you prefer handling CORS manually without the package, add a dedicated OPTIONS route:

app.options('*', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://your-frontend-domain.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Authorization, Content-Type');
  res.sendStatus(200);
});

A malformed authorization header can also trigger preflight-related blocks. Make sure you're sending the token in the Authorization header using the Bearer scheme, like this:

// Example frontend fetch call
fetch('https://people.googleapis.com/v1/people/me/connections', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${tokenFromYourNodeBackend}`,
    'Content-Type': 'application/json'
  }
});

You should also validate the token's validity on your backend before passing it to the frontend. You can call Google's token info endpoint to check if it's active and has the right permissions:

// Backend token validation example
const token = 'your-received-token';
fetch(`https://oauth2.googleapis.com/tokeninfo?id_token=${token}`)
  .then(res => res.json())
  .then(data => console.log(data)) // Check for expiry, audience, and scopes
  .catch(err => console.error('Invalid token', err));

In the Google Cloud Console, go to your OAuth 2.0 Client ID settings and make sure:

• Your frontend domain is added to the Authorized JavaScript origins list
• Your backend's callback URL is listed under Authorized redirect URIs

Missing these entries can cause silent auth failures that manifest as preflight errors.

Ensure your auth request includes the correct scopes for the Contacts API. Required scopes are either:

• https://www.googleapis.com/auth/contacts.readonly (for read-only access)
• https://www.googleapis.com/auth/contacts (for read/write access)

Also, note that Google now recommends using the People API's /people/me/connections endpoint instead of the legacy Contacts API endpoints—double-check you're calling the correct URL.

Open your browser's DevTools (Network tab), filter by OPTIONS requests, and inspect the response headers. Look for missing or misconfigured headers like:

• Access-Control-Allow-Origin (must match your frontend domain)
• Access-Control-Allow-Headers (must include Authorization)
• Access-Control-Allow-Methods (must include the HTTP method you're using for the actual API call)

If any of these are missing or incorrect, that's the root cause.

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