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

Question

Я использую:

• Vue 2.0.3
• vue-router 2.0.1
• vuex 0.8.2
• vue-ресурс 0.7.0

И после попытки войти на мою страницу при использовании удаленного API, а не локально запущенного, я получаю ошибку cors, как показано ниже

vue-resource.common.js?2f13:1074 OPTIONS 

https://mywebsite/api/auth/login 

(anonymous function) @     vue-resource.common.js?2f13:1074
Promise$1            @     vue-resource.common.js?2f13:681
xhrClient            @     vue-resource.common.js?2f13:1033
Client               @     vue-resource.common.js?2f13:1080
(anonymous function) @     vue-resource.common.js?2f13:1008


XMLHttpRequest cannot load https://mywebsite/api/auth/login. 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:8080' is therefore not allowed 
access. The response had HTTP status code 415.

Теперь у меня есть API, работающий в Azure, и, поскольку он позволяет мне тестировать свои звонки из Postman, я совершенно уверен, что заголовки CORS установлены правильно на бэкэнде. Не так уверен насчет Vue и фронта.

У меня такая ситуация в конфигурационных файлах:

export const API_ROOT = 'https://mywebsite/api/'
export const AuthResource = Vue.resource(API_ROOT + 'auth{/action}')

чем то, что я называю это действие как:

login: function (userData) {
    return AuthResource.save({action: 'login'}, userData)
}

Наконец, когда я проверяю авторизацию при входе через токен в подмодуле vuex, у меня просто состояние проверки заголовка.

var updateAuthHeaders = () => {
    var token = JSON.parse(localStorage.getItem("auth_token"))
    if (token != null){
        Vue.http.headers.common['Authorization'] = token
    }else{
        Vue.http.headers.common['Authorization'] = null
    }
}

Я пробовал добавлять Vue.http.headers.common['Access-Control-Allow-Origin'] = true здесь, но не помогло дело.

Любая идея? Что я делаю не так... Я полагаю, что он не будет работать для других звонков, даже если он не работает для входа в систему.

Answer 1

Вы сталкиваетесь с этой ошибкой, когда 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?

Answer 2

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

2) Vue.http.headers.common['Access-Control-Allow-Origin'] = true, Vue.http.headers.common['Access-Control-Allow-Origin'] = '*' и т. д. не требуется в запросе клиента.

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

Answer 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 разделяйте и используйте как можно более конкретный домен в своем белом списке.

Удачи!

Answer 4

Большая вероятность, что 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 и, следовательно, не должен применяться в производственной среде, а только в среде разработки.

Answer 5

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

Answer 6

Или вы можете обойти это для целей разработки с помощью расширения chrome CORS. Работает с кодами и коробкой

Answer 7

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

res.header('Access-Control-Allow-Origin','*');

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');