使用React Hooks Form提交表单发邮件时遇CORS错误求助

问题说明 #

使用React Hooks Form提交表单发送邮件时触发CORS错误，虽已定义corsOptions并传入app.use(cors())，但问题仍存在。

错误信息 #

Access to XMLHttpRequest at 'https://example.com.au/service/emailtransfer' from origin 'https://example.com.au' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当前服务器代码（server.js） #

const app = express();
const corsOptions = {
  origin: 'https://example.com.au',
  methods: 'GET, POST, PUT, OPTIONS',
  allowedHeaders: 'Authorization, Content-Type',
  credentials: true,
  exposedHeaders: 'Content-Length',
  maxAge: 3600
};

app.use(cors(corsOptions)) // Use this after the variable declaration

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/service/emailtransfer', async (req, res) => {

  res.header('Access-Control-Allow-Origin', 'https://example.com.au');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Athorization, Content-Type');
  res.header('Access-Control-Expose-Headers', 'Content-Length');
  res.header('Access-Control-Max-Age', '3600');

  const senderEmail = req.body.email;
  const senderMobile = req.body.mobile;
  const senderComments = req.body.comments;
  console.log("Contact details in server side:: "+senderEmail, senderMobile, senderComments );

  const transporter = nodemailer.createTransport({
    
    host: "smtpout.secureserver.net", //smtp.office365.com
    secure:true,
    secureConnection: false,
    tls: {
      ciphers:'SSLv3'
    },
    requireTLS: true,
    port:465, 
    debug:true,
    auth: {
      user: godaddyUserEmail, // Replace with your godaddy email
      pass: godaddyEmailPassword, // Replace with your godaddy email password
    },
  });

  try {
    await transporter.sendMail({
      from: senderEmail, // Replace with your email
      to: recipientJegniLifeEmail, // Replace with the recipient's email
      subject: 'Enquiry request from Example website',
      text: `SendersEmail: ${senderEmail}\nMobile Number: ${senderMobile}\nComments: ${senderComments}`,
    });
    res.status(200).json({ success: true });
  } catch (e) {
    console.error(e);
    res.status(500).json({ message: e.message });
  }
});

修复步骤 #

• 删除路由内重复的CORS头配置：全局cors中间件已处理CORS规则，路由内手动添加的res.header()会导致配置冲突，直接删除这些代码。
• 修正拼写错误：注意到路由内Access-Control-Allow-Headers写为Athorization（少了字母u），虽然这部分代码要删除，但需确保全局corsOptions里的allowedHeaders拼写正确（当前全局配置是对的）。
• 调整中间件执行顺序：将app.use(cors(corsOptions))移到bodyParser中间件之前，确保CORS头在请求解析前就被添加：

  app.use(cors(corsOptions));
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: true }));
  

• 显式处理OPTIONS预请求：为目标路由单独添加OPTIONS方法的CORS支持，确保预请求能返回正确响应：

  app.options('/service/emailtransfer', cors(corsOptions));
  

• 验证origin匹配度：确认前端页面的origin与配置的https://example.com.au完全一致，无端口号、协议（http/https）等差异。
• 排查反向代理影响：如果服务器部署在Nginx等反向代理后，需确保代理服务器未移除CORS响应头，比如Nginx需添加：

  proxy_set_header Access-Control-Allow-Origin $http_origin;
  proxy_pass_header Access-Control-Allow-Origin;
  

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