未捕获（承诺中）类型错误：尝试获取资源时出现网络错误。 firefox url 获取问题

Question

我制作了一个表格来收集用户的电子邮件并在数据成功时发出警报。当我在输入中输入任何值时，它会给我两个错误：

1. 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)

2. 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 protected]"/>
    <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)

我尝试使用扩展来解锁访问控制允许来源。还是同样的问题。 我还在函数中包含了模式：“no-cors”。

Answer 1

您看到的错误与 CORS（跨源资源共享） 有关，使用

mode: "no-cors"

并不能解决问题，因为它本质上会阻止您获得有意义的响应。当您使用

no-cors

时，它会限制检查响应的能力，并且您将无法正确检测请求的成功或失败。

要解决此问题，您需要在服务器端配置CORS，而不是尝试在客户端绕过它。

以下是解决该问题的分步指南：

1.在您的服务器 (Node.js) 上启用 CORS

在您的服务器代码中，您需要允许跨域请求。您可以使用

cors

中间件轻松完成此操作。

首先，在 Node.js 应用程序中安装

cors

包：

npm install cors

然后，更新您的服务器代码以包含

cors

中间件，如下所示：

const express = require('express');
const cors = require('cors');
const ExcelJS = require('exceljs'); // Assuming you're using ExcelJS for workbook manipulation

const app = express();
app.use(cors()); // Enable CORS for all routes
app.use(express.json()); // To parse JSON request bodies

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.status(200).json({ message: 'Data saved successfully!' });
});

app.listen(3001, () => {
  console.log('Server running on port 3001');
});

2.从前端删除

mode: "no-cors"

在服务器上启用 CORS 后，您的

no-cors

请求中不再需要

fetch

模式，因为这会导致响应处理出现问题。

更新前端代码以删除

no-cors

:

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!");
    } else {
      alert("Error: Could not save data.");
    }
  } catch (error) {
    console.error("Network error:", error);
    alert("Network error occurred.");
  }
};

3.测试您的 API

现在 CORS 已启用并且您的客户端代码已更正，请尝试再次提交表单。服务器应该在没有任何 CORS 问题的情况下做出响应，并且当数据成功保存时您应该看到警报。

其他步骤

• 更好地处理 Excel 文件：如果您经常写入 Excel 文件，请确保在多个请求同时传入时正确处理错误或冲突。

• 安全注意事项：如果您计划公开提供服务，请考虑使用以下方法将 CORS 限制到特定来源：

  app.use(cors({
    origin: 'http://your-frontend-domain.com'
  }));
  

这确保只有来自您自己的前端的请求才能访问 API。

通过在服务器端启用 CORS，您的表单提交现在应该可以正常工作，不会出现与 CORS 相关的错误。

您可以使用我们提供的工具免费网站漏洞扫描器来验证是否存在必要的安全标头，例如 HSTS、X-Content-Type-Options、X-Frame-Options 等。