Проблема CORS с Vue.js

Вы сталкиваетесь с этой ошибкой, если URL-адрес API и URL-адрес клиента не совпадают. Vue CLI 3 (и, по сути, Webpack) позволяет вам проксировать URL-адрес вашего API на URL-адрес вашего клиента.

Внутри vue.config.js файла добавьте следующие строки:

// vue.config.js
module.exports = {
  // options...
  devServer: {
        proxy: 'https://mywebsite/',
    }
}

А затем отправьте свои вызовы ajax в http://localhost/api/.

Вы можете прочитать статью полностью здесь: Как справиться с ошибкой CORS в Vue CLI 3?

Хотя вы можете добавить Access-Control-Allow-Origin: * к своему ответу сервера (в данном случае IIS), но этого настоятельно не рекомендуется.

Здесь происходит то, что ваш клиент - это http://localhost, и он пытается получить доступ к https://mywebsite/api/, что означает, что они не из того же происхождения

Если вы добавите Access-Control-Allow-Origin: *, вы позволите всему миру попасть в вашу конечную точку API.

Я бы посоветовал сделать ваш сервер заголовками Access-Control-Allow-Origin: *.mysite управления доступом и сделать виртуальный хост для вашего localhost для использования dev.mysite или аналогичного.

Это позволит вашему "localhost" без проблем получить доступ к вашему API.

Вы также можете добавить localhost в белый список, но это также имеет свои последствия для безопасности, и это в любом случае работает не везде.

Короче говоря, создайте виртуальный хост для вашего локального хоста, который находится в том же домене, что и ваша служба REST, и ваша проблема должна быть решена.

После запуска вам следует удалить часть *.mysite и использовать как можно более конкретный домен в своем белом списке.

Удачи!

1) Убедитесь, что сервер отправляет заголовок Access-Control-Allow-Origin "*".

2) Vue.http.headers.common['Access-Control-Allow-Origin'] = true, Vue.http.headers.common['Access-Control-Allow-Origin'] = '*' и т. Д. Не нужны в запросе client.

3) Vue.http.options.emulateJSON = true должен помочь, если 1 и 2 точки уже в порядке, но vue-resource не работает с status 0. Также попробуйте удалить (если они есть) Vue.http.options.credentials = true и Vue.http.options.emulateHTTP = true.

Более вероятно, что CORS не включен в IIS. Это можно включить, изменив файл web.config в корневой папке приложения в IIS следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
   <httpProtocol>
         <customHeaders>
           <add name="Access-Control-Allow-Origin" value="*" />
         </customHeaders>
   </httpProtocol>

</system.webServer>
</configuration>

Примечание. Этот метод позволит любому получить доступ к конечной точке API, поэтому его не следует применять в производственной среде, а только в среде разработки.

Вам нужен файл vue.config.js в корне вашего проекта и внутри файла vue.config, который вам нужен для определения вашего прокси в объекте devServer module.exports = { devServer: { proxy: 'https://exampledomain.com/api/'}};. Теперь в вашем axios.post вы можете сделать запрос, просто выполнив https://exampledomain.com/api/login

Просто прикрепите их в ответ на все свои API

res.header ('Доступ-Контроль-Разрешить-Происхождение', '*');

res.header ('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

res.header ('Access-Control-Allow-Headers', 'Источник, Content-Type, X-Requested-With, Accept, Authorization');