Ошибка «Отсутствует заголовок Access-Control-Allow-Origin» для некоторых запросов, но не для других

У меня есть приложение 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?

Спасибо.

Можете ли вы попробовать это cors = CORS (приложение, ресурсы = {r"/*": {"происхождение": "app.myvuejsapp.net"}})

onuriltan 27.05.2019 11:43

Ничего... та же ошибка - также пытался добавить https перед источником.

lowercase00 27.05.2019 11:56

Теперь я вижу, что вы отправляете пользовательские заголовки со своим запросом, так что можете ли вы попробовать добавить 'Заголовки запроса управления доступом': '*' в свой заголовок ответа?

onuriltan 27.05.2019 12:04

Да, я использую X-Access-Token для отправки своего токена (не знаю, хороший ли это подход, но пока так). @onuriltan, не знаю, как именно это сделать, какие-нибудь ссылки, которые помогут мне, как это добавить?

lowercase00 27.05.2019 12:20
Почему в Python есть оператор "pass"?
Почему в Python есть оператор "pass"?
Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.
Некоторые методы, о которых вы не знали, что они существуют в Python
Некоторые методы, о которых вы не знали, что они существуют в Python
Python - самый известный и самый простой в изучении язык в наши дни. Имея широкий спектр применения в области машинного обучения, Data Science,...
Основы Python Часть I
Основы Python Часть I
Вы когда-нибудь задумывались, почему в программах на Python вы видите приведенный ниже код?
LeetCode - 1579. Удаление максимального числа ребер для сохранения полной проходимости графа
LeetCode - 1579. Удаление максимального числа ребер для сохранения полной проходимости графа
Алиса и Боб имеют неориентированный граф из n узлов и трех типов ребер:
Оптимизация кода с помощью тернарного оператора Python
Оптимизация кода с помощью тернарного оператора Python
И последнее, что мы хотели бы показать вам, прежде чем двигаться дальше, это
Советы по эффективной веб-разработке с помощью Python
Советы по эффективной веб-разработке с помощью Python
Как веб-разработчик, Python может стать мощным инструментом для создания эффективных и масштабируемых веб-приложений.
1
4
1 359
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я правильно понимаю, что вы размещаете свое 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. Я только что отредактировал вопрос, включая конфигурацию, которую я использую в ведре.

lowercase00 27.05.2019 12:17
Ответ принят как подходящий

Каждый раз, когда вы сталкиваетесь со случаем, когда вы видите сообщение «Отсутствует заголовок« 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.

Другие вопросы по теме