表单提交触发邮件发送函数的Headers属性问题排查

Hey there, let's tackle the Headers-related problems in your email-sending function right away! I can spot two key issues that are likely causing trouble, plus a quick fix for request body consistency.

1. Access-Control-Allow-Origin Doesn't Belong in Request Headers #

That header is a response header—it's sent by the server back to the browser to tell it which origins are allowed to access the resource. Adding it to your frontend request does nothing useful and can even confuse the server. You need to remove this line entirely from your Headers setup.

2. Content-Type Mismatch with Request Body #

You're using URLSearchParams for your request body but setting Content-Type: application/json. These two don't play well together:

• URLSearchParams automatically formats data as application/x-www-form-urlencoded (the standard form submission format).
• If you set application/json, the server will expect a JSON string, not URL-encoded params.

Here are two corrected versions of your function, depending on what your backend expects: #

Option 1: Keep Using URL-Encoded Params (Form Data)

This works if your backend is set up to accept form-encoded data:

sendEmail() {
  const url = `the url placeholder`;
  const params = new URLSearchParams();
  const message = `${this.firstName} ${this.lastName} has submitted the following form: ${this.cons.name}`;

  params.set('to', 'email placeholder');
  params.set('from', 'email placeholder');
  params.set('subject', 'A user has submitted the form');
  params.set('message', message); // Add your message as a param

  fetch(url, {
    method: 'POST',
    body: params,
    // No need to manually set Content-Type—browser handles it automatically
    headers: new Headers()
  })
  .then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.json();
  })
  .catch(error => console.error('Error sending email:', error));
}

Option 2: Switch to JSON Payload (If Backend Expects JSON)

If your server is configured to accept JSON data, rewrite the function like this:

sendEmail() {
  const url = `the url placeholder`;
  const message = `${this.firstName} ${this.lastName} has submitted the following form: ${this.cons.name}`;
  const emailData = {
    to: 'email placeholder',
    from: 'email placeholder',
    subject: 'A user has submitted the form',
    message: message
  };

  fetch(url, {
    method: 'POST',
    body: JSON.stringify(emailData),
    headers: new Headers({
      'Content-Type': 'application/json'
      // Removed Access-Control-Allow-Origin entirely
    })
  })
  .then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.json();
  })
  .catch(error => console.error('Error sending email:', error));
}

Extra Note on CORS #

If you still run into CORS errors after fixing the headers, the problem is on the server side. Your backend needs to include the Access-Control-Allow-Origin header in its responses, allowing your frontend's domain to make requests. Frontend code can't bypass this—you'll need to configure the server to handle it.

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