按下更新按钮时出现错误

Posted 2023-03-27

【中文标题】按下更新按钮时出现错误

【英文标题】：getting error when update button is pressed

【发布时间】：2020-05-17 05:20:00

【问题描述】：

我有一个 vue 应用程序，它使用 mongodb 插入、更新和删除帖子，但更新功能有问题。当我按下更新帖子的按钮时，我收到以下错误。在 postComponent.vue 中的注释我刚刚添加了模板以显示表单是如何提交的以及 sciprt 标记 updatePost 中的函数

CORS 策略已阻止访问从源“http://localhost:8080”获取“http://localhost:5000/api/posts/5e31a39024a21d44bc4654af”：预检响应中的 Access-Control-Allow-Methods 不允许方法更新。

posts.js

//update posts
router.put('/:id', async (req,res) => 
    const posts = await loadpostscollection();

    await  posts.updateOne(
        topic: req.body.topic,
        price: req.body.price,
        location: req.body.location,
        provider: req.body. provider,
        createdAt: new Date()
    );
    res.status(201).send();
);

postServise.js

//update Posts
    static updatePost( id, topic, price, location, provider) 
        return fetch(url + id, 
            method: "UPDATE",
            mode: 'cors',
            headers: 
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            ,
            body: JSON.stringify(
                    topic,
                    price,
                    location,
                    provider
                
            )
        );
    

postComponent.vue

<template>
<div class ="container">
    <router-link to="/postComponent" >Show me post component</router-link>
  <h1>Create a new course</h1>
  <div class="create-post">
    <label for="create-topic">Add topic: </label>
<br>
      <br>
    <input type="text" id="create-topic" v-model="topic" placeholder="enter" required>
<br>
    <br>
      <label for="create-price">Add a price: </label>
      <br>
      <br>
      <input type="text" id="create-price" v-model="price" placeholder="enter">
    <br>
      <br>
    <label for="create-location">Add a location: </label>
      <br>
      <br>
    <input type="text" id="create-location" v-model="location" placeholder="enter">
      <br>
      <br>
    <label for="create-provider">Add a provider: </label>
      <br>
      <br>
    <input type="text" id="create-provider" v-model="provider" placeholder="enter">
      <br>
      <br>
    <button v-on:click="insertPost">Create course</button>

  </div>
  <hr>
  <p class="error" v-if="error"> error </p>
<div class="posts-container">
  <div class="post"
       v-for="(post, index) in posts"
       v-bind:item="post"
       v-bind:index="index"
       v-bind:key="post._id">

    <br>

      <p>Course topic:</p>
    <p class="text">post.topic  </p>

    <p>Course price:</p>
    <p class="text"> post.price    </p>
    <p>Course location:</p>
    <p class="text">post.location  </p>
    <p>Created by:</p>
    <p class="text"> post.provider   </p>
    <button v-on:click="deletePost(post._id)">Delete course</button>
<br>
      <br>

<br>
      <br>
      <input  type="text"  v-model="post.topic"/>
      <input  type="text"  v-model="post.price"/>
      <br>
      <br>
      <input  type="text"  v-model="post.location"/>
      <br>
      <br>
      <input  type="text"  v-model="post.provider"/>
      <button v-on:click="updatePost(post)">Update course</button>
</div>

  </div>
</div>
</template>

<script>
    async updatePost( _id: id, topic, price, location, provider ) 
              await postService.updatePost(id, topic, price, location, provider);
              this.posts = await postService.getPosts();
          ,

</script>

index.js

const  express  = require ('express');
const  bodyparser  = require ('body-parser');
const  cors  = require ('cors');

const  app = express();

app.use(bodyparser.json());

app.use(cors( origin: '*'));
const posts = require('./api/posts');
const users = require('./api/users');

app.use('/api/posts', posts);
app.use('/api/users', users);

const  port = process.env.port || 5000;


app.listen(port, () => console.log(`Server started on port $port`));

https://i.stack.imgur.com/75fRb.png

【参考方案1】：

不是vue或者JS的问题，是CORS请求的问题。您必须在后端允许 CROS 请求，或将请求 URI 更改为 http://localhost:8080/api/posts/5e31a39024a21d44bc4654af。

【讨论】：

是的，我知道请求 url 必须像你说的那样，但是当我从 api/posts/id 示例中获取该 id 时，它没有更新任何内容，我仍然得到同样的错误

它不依赖于请求的类型，对另一个站点的请求是 CORS 请求。对于 CORS 请求，必须在服务器端启用它，否则会出现这样的错误。

我在我有 cors 的地方添加了代码，如果你可以看看的话

尝试使用这个模块expressjs.com/en/resources/middleware/cors.html

我启用了 cors，但我不明白为什么它不起作用，因为逻辑是正确的