Я застрял со следующим сообщением об ошибке в браузере Chrome:
Не удалось загрузить http://localhost:5000/my_endpoint: Поле заголовка запроса
Access-Control-Allow-Origin не разрешен
Access-Control-Allow-Headers в предполетном ответе.
Браузер загружает веб-страницу из внешнего интерфейса Vue.js с помощью веб-пакета и т. Д. И vue-resource для выполнения HTTP-запросов к бэкэнду REST.
URL http://localhost:5000/my_endpoint является конечной точкой HTTP GET / POST, обслуживаемой приложением Python Flask.
На веб-интерфейсе Javascript у меня есть следующие настройки CORS:
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.http.options.crossOrigin = true
Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'
В коде внутреннего кода Python в приложении Flask у меня есть следующие подробности конфигурации CORS:
@app.after_request
def add_header(response):
response.headers['Access-Control-Allow-Origin'] = '*'
response.headers['Access-Control-Allow-Headers'] = 'Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Authorization'
response.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS, HEAD'
response.headers['Access-Control-Expose-Headers'] = '*'
return response
При выполнении этого запроса HTTP POST в веб-интерфейсе Javascript:
this.$http.post("http://localhost:5000/my_endpoint", { my_custom_key: "my custom value"})//, {emulateJSON: true})
.then((response) => {
// do stuff
})
где { my_custom_key: "my custom value"} - тело JSON HTTP-запроса POST, затем в бэкэнде Flask по какой-то причине я вижу, что приходит запрос HTTP OPTIONS, ср. колба бревно:
127.0.0.1 - - [26/Jun/2018 21:45:53] "OPTIONS /ad HTTP/1.1" 200 -
Должна быть какая-то церемония туда-обратно, чтобы почитать, прежде чем я смогу получить данные JSON из бэкэнда, но я теряюсь в этих деталях.
В Интернете я видел всевозможные объяснения, и я немного поиграл с деталями конфигурации vue-resource , такими как:
- добавление / удаление
{emulateJSON: true} к HTTP-запросу POST
- добавление / удаление
Vue.http.options.xhr = { withCredentials : true }; к конфигурации Vue.js
но я не могу получить данные JSON, поступающие из серверной части.
Поиск «CORS» в документации Vue.js или https://github.com/pagekit/vue-resource не дает никакой информации о том, как решить эти проблемы с помощью совместного использования ресурсов с несколькими источниками (CORS).
Как мне заставить веб-интерфейс Vue.js работать с бэкэндом Flask по этим вопросам CORS?