Getting error when update button is pressed

Question

I have a vue application which inserts, updates and delete posts by using mongodb but I am having a problem with the update function. When I press the button which updates the posts I am getting the following error. Note in the postComponent.vue I just added the template to show how the form is being submitted and the function in the script tag updatePost.

Access to fetch at 'http://localhost:5000/api/posts/5e31a39024a21d44bc4654af' from origin 'http://localhost:8080' has been blocked by CORS policy: Method UPDATE is not allowed by Access-Control-Allow-Methods in preflight response.

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}`));

Answer 1

Is not a problem of vue or JS, it's the CORS request problem. You must to allow CROS request on backend, or change request URI to http://localhost:8080/api/posts/5e31a39024a21d44bc4654af.