当前位置: 首页 > 知识库问答 >
问题:

无法使用读取API请求具有超文本标记语言页面的localhost节点服务器

云镜
2023-03-14

说明:

我试图将JSON数据从超文本标记语言页面发送到使用Fetch API在端口5000本地运行的Node.js服务器

获取错误:

在'http://localhost:5000/attend“起源”http://127.0.0.1:5501'已被CORS策略阻止:对飞行前请求的响应未通过访问控制检查:请求的资源上不存在'access control Allow Origin'标头。如果不透明响应满足您的需要,请将请求的模式设置为“no cors”,以获取禁用cors的资源。

端口错误:

邮递http://localhost:5000/attend net::ERR_失败

获取错误:

未捕获(promise中)TypeError:无法获取

代码错误图像

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>

共有1个答案

王渊
2023-03-14

请在您的软件包中安装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

在那之后,你的请求会很有效。

 类似资料:
  • 已经讨论过这些话题,但没有对我起作用: Topic1我的项目中没有注释 这是我用于Thymeleaf的依赖项: 我的新控制器名为 名为uploadView的HTML。html 项目结构: 我的评论:我仍然得到一个白标签错误页面,位于本地主机:8082/uploadendpoint 编辑1: 我的SpringBootApplication类 <代码>应用程序。属性文件: 服务器的日志 白标错误页面:

  • 我是新来的。我想解析html,但问题是我们必须在中指定的URL,我将在运行时从其他页面响应此URL。有没有办法将收到的网址传递到中?我读过这样的东西: 但是我不知道如何使用它。我很想知道是否有其他方法比jsoup更好。

  • 对于上面的html内容,我如何使用Jsoup解析并获取文本 当我使用 我得到了这样的东西

  • 我正在尝试浏览以下网站: https://www.bandsintown.com/?came_from=257 使用以下代码,我能够使用beautifulsoup成功地抓取页面上列出的事件: 然而,我遇到的问题是,我只能抓取前18个事件-页面的其余部分只有在单击底部的“全部查看”按钮时才可用。在beautifulsoup或其他程序中,是否有办法模拟单击此按钮,以便我可以刮取所有数据?我更喜欢用py

  • 我打开这个链接"http://www.amazon.com/s?rh=n: 1"与urllib2和我试图获取下一页链接(href="/s/ref=lp_1_pg_2?rh=n: 283155, n:!1000, n: 1

  • 当你将鼠标悬停在网页的某个区域时,有很多基于JavaScript的库会显示工具提示。有些相当简单,有些允许工具提示显示用CSS样式设计的超文本标记语言内容。 但是有没有一种方法可以在不使用JavaScript的情况下显示样式化的工具提示?如果您只是使用属性,标记不会被处理(例如