Политика Vue Axios CORS: нет «Access-Control-Allow-Origin»

CORS — это сервер, сообщающий клиенту, какие HTTP-запросы ему разрешено делать. Каждый раз, когда вы видите заголовок Access-Control-Allow-*, он должен быть отправлен сервером, а НЕ клиентом. Сервер «разрешает» клиенту отправлять определенные заголовки. Клиенту не имеет смысла давать себе разрешение. Поэтому удалите эти заголовки из кода внешнего интерфейса.

axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

this.axios.post('http://localhost:8888/project/login', this.data, {
   headers: {
          // remove headers
        }
      }).then(res => {
        console.info(res);
      }).catch(err => {
        console.info(err.response);
      });

Например, представьте, что ваш сервер установил этот заголовок cors.

header("Access-Control-Allow-Methods: GET");

Это означает, что клиенту из другого источника разрешено отправлять только запросы GET, поэтому axios.get сработает, axios.post сработает, axios.delete сработает и т. д.

в моем случае curl && postman работает, но не работает с vue axios.post

Access to XMLHttpRequest at 'http://%%%%:9200/lead/_search' from origin 'http://%%%%.local' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

Итак, проблема на стороне vue, а не на сервере!

Ответ сервера содержит заголовок «access-control-allow-origin: *».

Это может произойти, когда вы пытаетесь вызвать другой хост для ex- Ваше приложение Vue работает на локальном хосте: 8080, но ваш серверный API работает на http://локальный:8888. В этой ситуации запрос axios ищет этот localhost:8080/project/login вместо этого http://локальный:8888/проект/логин

Чтобы решить эту проблему, вам нужно создать прокси в вашем приложении vue.

Следуйте этой инструкции. Создайте файл js vue.config.js или webpack.config.js, если у вас его еще нет в корневой папке.

затем включите ниже

module.exports = {
 devServer: {
     proxy: 'https://localhost:8888'
 } }

Если вам нужно несколько бэкэндов, используйте ниже

module.exports = {
devServer: {
    proxy: {
        '/V1': {
            target: 'http://localhost:8888',
            changeOrigin: true,
            pathRewrite: {
                '^/V1': ''
            }
        },
        '/V2': {
            target: 'https://loclhost:4437',
            changeOrigin: true,
            pathRewrite: {
                '^/V2': ''
            }
        },

    }
}

Если вы выберете второй перед конечной точкой, используйте V1 или V2. ex - ваша конечная точка /project/login, прежде чем использовать V1/project/login или V2/project/login согласно хозяину

Dev Proxy — ваше решение

С помощью DevProxy вы определяете конкретный путь или подстановочный знак (не статический), на который Node (на сервере работает vue-cli dev server) будет направлять трафик.

После определения (одна запись в vue.config.js) вы вызываете свой API с тем же URI, что и ваш пользовательский интерфейс (тот же хост и порт), и Vue перенаправляет запрос на сервер API, предоставляя соответствующие заголовки CORS.

смотреть больше на https://cli.vuejs.org/config/#devserver-прокси

У меня была такая же проблема, даже на стороне сервера все было в порядке.

Решение проблемы заключалось в том, что ссылка API, которую я нажал на не хватало косой черты (/) в конце, вызвала ошибку CORS.

Я создаю приложение на Vue.js и добавляю глобальные заголовки в файл main.js.

Пример:

axios.defaults.headers.get['header-name'] = 'value'

Для обработки проблем CORS теперь вам, возможно, придется вносить изменения на стороне клиента, это не просто проблема сервера.

В Chrome есть несколько плагинов: https://chrome.google.com/webstore/search/cors?hl=ru.

Вы можете попробовать:

В задней части,

1. npm установить корс

2. затем в бэкенде app.js добавьте следующее:

   const корс = требуется ('корс')

   app.use (cors ({ происхождение: ['http://localhost:8082'], }))

Надеюсь, это может помочь.

в моем случае, добавив это в мою функцию API бэкэнда php, это сработало

        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS, post, get');
        header("Access-Control-Max-Age", "3600");
        header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
        header("Access-Control-Allow-Credentials", "true");

в некоторых случаях это не проблема vue. иногда это внутренняя проблема. В моем случае я сделал API в гнезде JS и не включил CORS = true. Вот почему я получаю ошибку политики CORS.