ошибка при нажатии кнопки обновления - PullRequest
Новая
       6

ошибка при нажатии кнопки обновления

0 голосов
/ 31 января 2020

У меня есть приложение vue, которое вставляет, обновляет и удаляет сообщения с помощью mongodb, но у меня возникла проблема с функцией обновления. Когда я нажимаю кнопку, которая обновляет сообщения, я получаю следующую ошибку. примечание в postComponent. vue Я просто добавил шаблон, чтобы показать, как форма отправляется, и функцию в теге sciprt updatePost

Доступ к выборке в 'http://localhost: 5000 / api / posts / 5e31a39024a21d44bc4654af 'from origin' http://localhost: 8080 'было заблокировано политикой CORS: метод UPDATE не разрешен Access-Control-Allow-Methods в ответе предполетной проверки.

сообщений. 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>

индекс. 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 Ответ

1 голос
/ 31 января 2020

Это не проблема vue или JS, это проблема запроса CORS. Вы должны разрешить запрос CROS на бэкэнд или изменить URI запроса на http://localhost: 8080 / api / posts / 5e31a39024a21d44bc4654af .

...