前端表单提交遇CORS及NetworkError问题求解决方案

问题现象 #

制作了一个收集用户邮箱的表单，提交时本应弹出成功提示，但输入任意内容提交后出现两个错误：

• Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3001/emailcoll. (Reason: CORS request did not succeed). Status code: (null)
• Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

相关代码 #

前端组件提交函数 #

const handleChange = (e) => {
  setFormData({
    ...formData,
    [e.target.name]: e.target.value,
  });
};

const handleSubmit = async (e) => {
  e.preventDefault();
  const response = await fetch('http://localhost:3001/emailcoll', {
    method: 'POST',
    mode:"no-cors",
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(formData),
  });
  if (response.ok) {
    alert("Data Saved Successfully!")
  }
};

前端表单代码 #

<form onSubmit={handleSubmit} className={styles.subs}>
    <label  className={styles.substext}>Stay updated on our all upcoming events!</label>
    <input onChange={handleChange} value={formData.email} name="email" className={styles.subsinput} placeholder="email@xyz.com"/>
    <button  type="submit" className={styles.subsbut}>Subscribe</button>
</form>

后端处理代码 #

app.post('/emailcoll', async (req, res) => {
    const { email } = req.body;
    const filePath = './emailcoll.xlsx';

    let workbook;
    let worksheet;

    workbook = new ExcelJS.Workbook();
    await workbook.xlsx.readFile(filePath);
    worksheet = workbook.getWorksheet('Sheet 1');

    worksheet.columns = { header: 'Email', key: 'email' }
  
    worksheet.addRow({email});

   
    await workbook.xlsx.writeFile(filePath);
    res.send(STATUS_CODES)
})
app.listen(3001)

解决方案 #

1. 移除前端fetch的mode:"no-cors" #

no-cors模式会限制浏览器读取响应内容，即使请求发送成功，也无法通过response.ok判断状态，反而掩盖真实的跨域问题，直接删除这一行即可。

2. 后端配置CORS支持 #

在后端项目中安装并使用cors中间件，允许前端跨域请求：

• 安装依赖：npm install cors
• 修改后端代码：

const express = require('express');
const cors = require('cors');
const app = express();

// 开发环境允许所有来源跨域，生产环境建议指定具体域名
app.use(cors());
// 解析JSON格式请求体，必须放在路由之前
app.use(express.json());

app.post('/emailcoll', async (req, res) => {
    const { email } = req.body;
    const filePath = './emailcoll.xlsx';

    try {
        const workbook = new ExcelJS.Workbook();
        await workbook.xlsx.readFile(filePath);
        const worksheet = workbook.getWorksheet('Sheet 1');

        // 仅在工作表无列配置时设置，避免覆盖已有数据结构
        if (!worksheet.columns.length) {
            worksheet.columns = [{ header: 'Email', key: 'email' }];
        }
      
        worksheet.addRow({ email });
        await workbook.xlsx.writeFile(filePath);
        
        // 返回明确的成功响应
        res.status(200).json({ message: '邮箱保存成功' });
    } catch (error) {
        // 捕获错误并返回友好提示
        console.error(error);
        res.status(500).json({ message: '保存失败，请重试' });
    }
})

app.listen(3001, () => {
    console.log('服务器运行在http://localhost:3001');
});

3. 优化前端错误处理逻辑 #

修改handleSubmit函数，覆盖网络错误和后端异常场景：

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const response = await fetch('http://localhost:3001/emailcoll', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formData),
    });
    if (response.ok) {
      alert("Data Saved Successfully!");
      // 提交成功后清空表单
      setFormData({ email: '' });
    } else {
      const errorData = await response.json();
      alert(errorData.message || '保存失败，请重试');
    }
  } catch (error) {
    alert('网络错误，请检查服务器是否运行');
    console.error(error);
  }
};

关键说明 #

• 跨域问题的核心是后端未配置CORS响应头，浏览器扩展仅能临时绕过，不能作为生产环境解决方案。
• 后端必须添加express.json()中间件，否则无法解析前端发送的JSON请求体，req.body会为空导致无法获取邮箱数据。
• 后端添加错误捕获逻辑，避免文件读写失败导致服务器崩溃，同时给前端返回明确的错误提示。

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