получение CORS и сетевой ошибки при вызове post-запроса axios с использованием Vue js

#node.js #mongodb #vue.js #axios #cors

Вопрос:

Я получаю ошибку при вызове post-запроса axios. Но он работает правильно на postman.

Код, который я использовал для вызова запроса

 methods : {
     displayData(){
        var config = {
            method: 'post',
            url: 'http://localhost:5000/api/request/displayRequest',
            headers: { 
                'Content-Type': 'application/json'
            },
        data : JSON.parse(JSON.stringify(this.user._id))
        };

            axios(config)
            .then(function (response) {
            console.log(JSON.stringify(response.data));
            })
            .catch(function (error) {
            console.log(error);
            });
        },
    async mounted(){
        this.displayData()
    }

Я уже реализовал CORS на серверной части в server.js

 // Cors Middleware
const cors = require('cors');
app.use(cors());
app.options("*", cors());

Ответ №1:

 app.use(
  cors({
    origin: (origin, callback) => callback(null, true), // you can control it based on condition.
    credentials: true, // if using cookie sessions.
  })
);

1. Это не дает ответа на вопрос. Чтобы критиковать или запрашивать разъяснения у автора, оставьте комментарий под его сообщением.

2. Комментариев @Clijsters внутри кода достаточно!

Ответ №2:

в вашем бэкэнде используйте это :

 npm i cors

и в вашей экспресс-серверной точке входа:

 const cors = require("cors");
app.use(cors());
app.options("*", cors());

Ответ №3:

Вы запускаете свой интерфейс на локальном хосте и используете какой-либо порт. Кроме того, ваш сервер работает на локальном хосте, порт 5000. Но ваше интерфейсное приложение не может получить доступ к какому-либо другому порту из-за политики CORS. Вы можете решить эту проблему в серверной части, если используете Node JS. Установите cors с помощью следующей команды:

 npm i cors

Затем в файле вашего сервера измените свое приложение на

 app.use(cors());

Примечание. Если вы использовали React js, вы могли бы использовать http-proxy-middleware. Просто создайте файл внутри каталога src с именем «setupProxy.js «. и добавьте следующие строки.

 const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
    app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:5000/",
    })
  );
};

Не забудьте изменить порт в этом файле на порт вашего сервера.