Блог

Главная - Вопросы по программированию - Как установить несколько источников в файле CORS json с облачным хранилищем Google?

Как установить несколько источников в файле CORS json с облачным хранилищем Google?

#google-cloud-platform #cors

#google-облачная платформа #cors

Вопрос:

Я пытаюсь использовать несколько сайтов CORS origin с хранилищем Google.

У Mozilla Firefox, похоже, нет проблем с несколькими источниками. Но Google Chrome выдает эту ошибку: Access to XMLHttpRequest at 'FILE AT GOOGLE STORAGE' from origin 'https://example2.org' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://example1.org' that is not equal to the supplied origin.

Я попытался записать файл cors json следующим образом: 

 [
    {
      "origin": ["https://example1.org", "https://example2.org"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD"],
      "maxAgeSeconds": 1800
    } 
]

и вот так:

 [
    {
      "origin": ["https://example1.org"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD"],
      "maxAgeSeconds": 1800
    },
    {
      "origin": ["https://example2.org"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD"],
      "maxAgeSeconds": 1800
    }  
]

Google Chrome не нравится ни один из вариантов.

Ответ №1:

Первый способ, который вы указали, правильный, сохраните файл JSON (т.Е. bucket-cors-config.json ):

 [{
  "origin": ["https://example1.org", "https://example2.org"],
  "responseHeader": ["Content-Type"],
  "method": ["GET", "HEAD"],
  "maxAgeSeconds": 1800
}]

Затем используйте gcloud cli util для установки в вашей корзине:

 gsutil cors set bucket-cors-config.json gs://my-bucket

Если вы проверяете разные источники в браузере и получаете ошибку CORS, убедитесь, что это не из-за кэша браузера. Некоторые браузеры будут использовать кэшированный ответ для неправильного источника, потому что URL-адреса назначения совпадают. Этот кэшированный ответ будет иметь неправильный заголовок origin и вызовет ошибку CORS.

Комментарии:

1. если у вас есть CDN / балансировщик нагрузки, очистка кэша CDN может помочь

Ответ №2:

Метод Арджуна работает хорошо.

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

Это небольшой взлом, но в моем случае он хорошо работал для добавления исходного значения строки запроса:

 const fetchHandler = url => fetch(`${url}?cache=${window.origin}`)
  .then(res => {
    if (res.ok) return Promise.resolve(res);
    return Promise.reject(res);
  })
  .catch(err => Promise.reject(err));

export default fetchHandler;