无法使用 fetch API 请求具有 HTML 页面的本地主机节点服务器

Question

描述：

我正在尝试使用 Fetch API 将 JSON 数据从 HTML 页面发送到本地端口 5000 上的 Node.js 服务器运行。

获取错误：

从来源 'http://127.0.0.1:5501' 在 'http://localhost:5000/attend' 获取的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin' header 出现在所请求的资源上。如果不透明响应满足您的需求，请将请求的模式设置为 'no-cors' 以在禁用 CORS 的情况下获取资源。

端口错误：

POST http://localhost:5000/attend net::ERR_FAILED

获取错误：

未捕获（承诺）TypeError：获取失败

Code Error Image

Node.js代码：

  connectdb();
    const app = express();
    
    app.use(express.static('public'));
    app.use(express.json({extended: false}));
    app.use (bodyParser.json());
    
    
    app.get('/',(req,res)=> res.send('API RUNNING'));
    
    app.post('/attend',async (req,res)=>{
        const {name,rollnumber} = req.body;
        console.log(name);
        console.log(rollnumber);
        try {
            let data = await Database.findOne({ rollnumber });
            if (data) {
                return res
                  .status(400)
                  .json({ errors: [{ msg: 'attandence is marked all ready' }] });
              }
              const  Data = new Database({
                rollnumber,
                name
              });
              await Data.save();
              res.json("added success fully");
        } catch (err) {
            console.error(err.message);
            res.status(500).send('Server Error');
        }
    });

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marked</title>
    <link rel="stylesheet" href="/Client/style.css">
    <script>

     function attend(){
      const data = {
        name:'Syed Ali Shahzil',
        rollnumber:'180996'  
    };
    const options = {
      method:'POST',
      headers:{
        'Content-Type' : 'application/json;charset=UTF-8'
      },
      body: JSON.stringify(data)
    };
    fetch('http://localhost:5000/attend',options);  
    }
 
  
  
    </script>
</head>
<body>
    <div>
        <ul>
            <li><a  href="/">Home</a></li>
            <li><a class="active" href="marked.html">attendence Marked</a></li>
           
          </ul>
          <button class="button" onclick="attend()"> Present</button>
        </div>
</body>
</html>

Answer 1

通过

在你的包中安装cors

$ npm install cors

并在您的应用中使用它

// Import cors
const cors = require("cors");
const app = express();

// Add it in the middleware
app.use(cors())
... Rest of your code

之后您的请求将正常工作。

无法使用 fetch API 请求具有 HTML 页面的本地主机节点服务器

Cannot able to request the localhost node server with HTML page using fetch API

html

javascript

node.js

express

fetch-api