I am encountering a challenge in my Vue application that involves inserting, updating, and deleting posts using MongoDB. Specifically, I am facing an issue with the update function. Whenever I attempt to update a post by clicking the corresponding button, I receive the following error message. It should be noted that in the postComponent.vue file, I recently included a template showcasing how the form is submitted, as well as the function within the script tag updatePost.
The error reads: 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}`));