我有一个vue应用程序，可以使用mongodb插入，更新和删除帖子，但我在更新功能上遇到了问题。当我按下更新帖子的按钮时，我得到以下错误。注意，在postComponent.vue中，我只是添加了模板来显示表单是如何提交的，以及脚本标记updatePost中的函数。
CORS策略已阻止从源“http：//localhost：8080”访问“http：//localhost：5000/api/posts/5e 31 a39024 a21 d44 bc 4654 af”：检查前响应中的Access-Control-Allow-Methods不允许方法UPDATE。
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}`));

型
x1c 0d1x的数据