使用JavaScript添加指定请求头失败，OPTIONS请求报错求助

Let's break down what's happening here—this is almost certainly a CORS preflight failure combined with potential missteps in how you're adding the Key header in your code. Here's why your setup isn't working, and how to fix it:

Why the OPTIONS Error Happens #

When you send a request with a custom header like Key, browsers treat this as a "non-simple request." Before sending your actual API call, the browser automatically sends an OPTIONS preflight request to the server to ask:

"Hey, am I allowed to send this request with the Key header?"

If the server doesn't respond with the right CORS headers (specifically Access-Control-Allow-Headers: Key), the browser blocks the actual request entirely. That's why you don't see the Key header in Live Headers—your real request never even gets sent because the preflight failed.

The manual Chrome extension works because most CORS extensions bypass the browser's native preflight checks, so the request goes through regardless of the server's CORS config.

Common Code Issues to Check #

1. Incorrect Header Placement in Your Request #

Double-check that you're adding the Key header to the correct part of your request configuration. For example:

If using fetch:

Make sure the header is included in the headers object of your fetch options—don't append it after the request is initialized:

// Correct way
fetch('https://your-api-endpoint.com', {
  method: 'POST', // or PUT/PATCH/etc.
  headers: {
    'Key': 'XXXXXXX',
    'Content-Type': 'application/json' // if your request uses JSON
  },
  body: JSON.stringify(yourData)
})

// Wrong ways to avoid:
// - Trying to add headers after creating the request
// - Forgetting to wrap headers in the options object

If using axios:

Ensure the header is in the headers property of your axios config:

// Correct way
axios({
  url: 'https://your-api-endpoint.com',
  method: 'post',
  headers: {
    'Key': 'XXXXXXX'
  },
  data: yourData
})

If you added the header twice, make sure you're not accidentally overwriting it (e.g., setting headers.Key twice in the same object—later values will override earlier ones).

2. Request Interceptors Are Removing the Header #

If you're using a library like axios with request interceptors, check if the interceptor is modifying or deleting your Key header. For example:

// Double-check interceptors like this—are they accidentally stripping headers?
axios.interceptors.request.use(config => {
  // Oops: if you're reassigning config.headers without preserving existing keys, you'll lose `Key`
  // config.headers = { 'Content-Type': 'application/json' } ❌
  // Instead, merge or add to existing headers:
  config.headers['Key'] = 'XXXXXXX'; // Or keep your original assignment
  return config;
});

3. Server-Side CORS Configuration Is Missing #

The most likely root cause is that your server isn't handling the OPTIONS preflight request correctly. To fix this, your server needs to respond to OPTIONS requests with these headers:

• Access-Control-Allow-Origin: Set to your frontend's domain (or * for development, but avoid in production)
• Access-Control-Allow-Headers: Must include Key (along with any other custom headers you're using)
• Access-Control-Allow-Methods: List the HTTP methods your API accepts (e.g., POST, GET, PUT)

For example, if you're using Node.js/Express, you'd use something like:

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

How to Verify #

1. Open Chrome's Network tab (not just Live Headers) and filter by OPTIONS requests. Look at the response headers for your API endpoint—check if Access-Control-Allow-Headers includes Key.
2. If the response headers are missing that entry, the problem is server-side. If they're present, go back and double-check your frontend code for header placement or interceptor issues.

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