У меня есть приложение VueJS, работающее на S3, которое обслуживается API на базе Flask, работающим на AWS Elastic Beastalk.
Эта проблема
При выполнении запросов немного я получаю следующее:
Access to XMLHttpRequest at 'https://api.myflaskapi.net/blueprint/get_info?date=2019-01-01' from origin 'https://app.myvuejsapp.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Что я сделал до сих пор
В моем файле __init__.py
, инициализированном фабрикой приложений во Flask, я установил CORS(app, support_credentials=True)
в качестве примера для эта ссылка. При этом я надеюсь, что в основном любой запрос будет иметь заголовок CORS, поэтому у меня не будет никакой политики, блокирующей мои запросы внешнего интерфейса.
Идеальным сценарием было бы разрешить запросы только от https://app.myvuejsapp.net
, поэтому я попытался использовать CORS(app, support_credentials=True, origins=['https://app.myvuejsapp.net'])
, но тоже безуспешно.
Я также пытался создать один экземпляр CORS для каждого из моих чертежей с CORS(myblueprint)
для каждого файла маршрута .py
(у меня есть по одному для каждого чертежа), также безуспешно.
Странно то, что у меня есть одна функция на Vue, которая запускается, когда приложение mounted
работает нормально. Я не вижу никакой разницы между этой и другими функциями, которые не будут работать.
Пример работающей функции (возвращает true
или false
из бэкенда):
checkDB() {
const path = this.base_url + 'blueprint/check_db'
axios.get(path, this.token)
.then(checkupd => {
this.isupdated = Boolean(checkupd.data);
if (this.isupdated == true) {
this.update_msg = "Database up to date."
this.loading = false
this.finished = true
} else {
this.update_msg = "WARNING: Check DB status."
}
})
.catch(error => {
console.info(error)
})
},
Пример неработающей функции (возвращает XLS из бэкенда):
getSalesFrom(file) {
const fs = require('fs')
const FileDownload = require('js-file-download');
const path = this.base_url + `blueprint/get_sales?date=${this.date}`
axios.get(path, {
headers:
{
"X-Access-Token": "mytoken",
"Content-Type": "application/json"
},
responseType: 'blob'
})
.then(response => {
const content = response.headers['content-type'];
download(response.data, 'text.xlsx', content)
})
.catch(error => {
console.info(error)
})
this.export_dialog = false
}
XML-файл конфигурации S3 CORS
<?xml version = "1.0" encoding = "UTF-8"?>
<CORSConfiguration xmlns = "http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
<AllowedHeader>Content-Length</AllowedHeader>
<AllowedHeader>Access-Control-Allow-Origin</AllowedHeader>
<AllowedHeader>X-Access-Token</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Любые идеи о том, что я могу делать неправильно? Я читаю некоторое время, но, похоже, не могу найти решение довольно простой проблемы ... Может быть, мне стоит возиться с конфигурацией разрешений корзины S3?
Спасибо.
Ничего... та же ошибка - также пытался добавить https
перед источником.
Теперь я вижу, что вы отправляете пользовательские заголовки со своим запросом, так что можете ли вы попробовать добавить 'Заголовки запроса управления доступом': '*' в свой заголовок ответа?
Да, я использую X-Access-Token
для отправки своего токена (не знаю, хороший ли это подход, но пока так). @onuriltan, не знаю, как именно это сделать, какие-нибудь ссылки, которые помогут мне, как это добавить?
Я правильно понимаю, что вы размещаете свое Vue.js
приложение от S3
.
Вам нужно включить CORS
заголовки в свои S3
корзины. Без них браузер будет блокировать все запросы к вашему приложению Flask. Вы делаете запросы к api.myflaskapi.net
из app.myvuejsapp.net
, поэтому вам нужно настроить CORS
в app.myvuejsapp.net
.
Вы можете прочитать документацию, как установить CORS
в S3
здесь и здесь.
To configure your bucket to allow cross-origin requests, you create a CORS configuration, which is an XML document with rules that identify the origins that you will allow to access your bucket, the operations (HTTP methods) that will support for each origin, and other operation-specific information.
You can add up to 100 rules to the configuration. You add the XML document as the cors subresource to the bucket either programmatically or by using the Amazon S3 console. For more information, see Enabling Cross-Origin Resource Sharing (CORS).
Да, вы правы, приложение Vue.js
размещено на S3. Я только что отредактировал вопрос, включая конфигурацию, которую я использую в ведре.
Каждый раз, когда вы сталкиваетесь со случаем, когда вы видите сообщение «Отсутствует заголовок« Access-Control-Allow-Origin »» для некоторых запросов, но не для других, используйте панель «Сеть» в инструментах разработки браузера, чтобы проверить код состояния HTTP ответа.
Почти всегда вы обнаружите, что код состояния HTTP в этих случаях представляет собой ошибку 4xx или 5xx вместо ожидаемого успешного ответа 200 OK.
Единственная причина, по которой вы видите сообщение «Отсутствует заголовок« Access-Control-Allow-Origin »», заключается в том, что заголовок Access-Control-Allow-Origin обычно не добавляется к ошибкам 4xx и 5xx. Частично причина в том, что, особенно в случае 5xx, причиной может быть сбой сервера, который происходит до того, как сервер успевает запустить код вашего приложения. Наряду с этим большинство серверов по умолчанию не добавляют заголовки ответа набора приложений к ошибкам 4xx и 5xx; вместо этого по умолчанию они добавляют их только к успешным ответам 2xx.
Итак, в любом случае, что вы хотите сделать, это просмотреть журналы сервера на стороне сервера (для сервера, на который вы отправляете запрос) и посмотреть, какие сообщения регистрирует сервер о причине какой-либо проблемы, которая делает сервер в конечном итоге отправляет ответ об ошибке 4xx или 5xx.
Можете ли вы попробовать это cors = CORS (приложение, ресурсы = {r"/*": {"происхождение": "app.myvuejsapp.net"}})