fetch 请求not allowed by access-control-origin

该错误是由于浏览器的同源策略所导致的。同源策略是浏览器的一种安全机制，它限制了一个源加载的文档或脚本如何与来自另一个源的资源进行交互。当你在前端使用 fetch 请求后端接口时，如果后端接口的域名和前端页面的域名不同，就会出现这个错误。

解决这个问题的方法有两种：
1. 在后端接口中设置 Access-Control-Allow-Origin 头部，允许前端页面的域名访问该接口。例如，在 Node.js 中可以使用 cors 模块来实现：

   const cors = require('cors');
   const express = require('express');
   const app = express();
   
   app.use(cors({
     origin: 'http://localhost:3000'
   }));
   
   app.get('/api/data', (req, res) => {
     // 返回数据
   });
   
   app.listen(8080);

2. 在前端请求中添加 mode: 'no-cors'，这样浏览器就会发送一个“不透明”的请求，不会检查响应的内容类型和头部信息。但是，这种方法只适用于 GET 和 POST 请求，并且无法访问响应的内容。

   fetch('http://example.com/api/data', {
     method: 'POST',
     mode: 'no-cors',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(data)
   }).then(response => {
     // 处理响应
   }).catch(error => {
     // 处理错误
   });