Блог

Главная - Вопросы по программированию - Доступ к выборке в из источника ‘https://www.reddit.com » был заблокирован … CORS

Доступ к выборке в из источника ‘https://www.reddit.com » был заблокирован … CORS

#javascript #google-chrome-extension #google-cloud-functions #cors #gsutil

#javascript #google-chrome-расширение #google-cloud-функции #cors #gsutil

Вопрос:

Я работаю над расширением Google Chrome, чтобы блокировать подмножество изображений из сообщений в ленте Reddit пользователя на основе некоторого серверного компьютерного зрения, выполняемого на Python в облачном хранилище Google. Код Python принимает один аргумент (URL изображения в Reddit), который передается в JavaScript через:

 const api_url = https://<my-google-chrome-url>

var curUrl = $(this).attr("src")
fetch(api_url,{
  method: 'POST',
  body: JSON.stringify(curUrl),
  headers: {
    'Content-Type': 'application/json'
    },
  })
  .then(data => {console.log(data)})

Когда выполняется код расширения, я получаю следующее в консоли:
Доступ к выборке в ‘https://this-is-the-path-to-my-google-cloud-function » из источника «https://www.reddit.com ‘ заблокирован политикой CORS: ответ на предполетный запрос не проходит проверку контроля доступа: заголовок ‘Access-Control-Allow-Origin’ отсутствует на запрошенном ресурсе. Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса на «no-cors», чтобы получить ресурс с отключенным CORS.

Я пробовал несколько решений, перечисленных ниже:

  1. Я следовал приведенным здесь инструкциям, так что, используя Google gsutil , я могу подтвердить, что следующее верно для корзины, в которой находится моя функция: [{"maxAgeSeconds": 3600, "method": ["GET", "POST"], "origin": ["https://www.reddit.com"], "responseHeader": ["Content-Type"]}] . Я также пытался ["*"] использовать его в качестве источника, но безрезультатно.
  2. Я также пытался использовать в своей выборке, mode: no-cors но безуспешно.

Любые предложения или решения будут высоко оценены!

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

1. <my-google-chrome-url> разрешает ли CORS?

2. Response to preflight … включая обработку OPTIONS предполетного запроса

3. Спасибо за комментарий @Jaromanda X Согласно командам gsutil, которые я запускал, <my-google-chrome-url> должен быть настроен, как в #1 выше. Есть ли дополнительные разрешения, которые мне нужно внести в мой код Python или другие?

4. прочитайте о предполетной проверке на этой странице … в частности, пункты 3, 5 и 6

5. Современный Chrome запрещает запросы из разных источников в сценариях содержимого, поэтому делайте это в фоновом скрипте. Чтобы сделать запрос с перекрестным источником в фоновом скрипте, просто добавьте URL permissions -адрес и используйте fetch or XMLHttpRequest как есть, никаких хитростей не требуется, см. developer.chrome.com/extensions/xhr

Ответ №1:

Что касается того, что вы упомянули, ошибка CORS в этом случае, похоже, исходит из облачной функции.

Чтобы решить эту проблему, вы должны настроить CORS для облачной функции, а не для облачного хранилища.

CORS состоит из предполетного запроса и основного запроса. В вашей функции вы должны проверить наличие предполетного запроса, проверив, является ли метод запроса ОПЦИЕЙ, и если да, ответьте на соответствующие заголовки. Вот пример:

 def cors_enabled_function(request):
    # For more information about CORS and CORS preflight requests, see
    # https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
    # for more information.

    # Set CORS headers for the preflight request
    if request.method == 'OPTIONS':
        # Allows GET requests from any origin with the Content-Type
        # header and caches preflight response for an 3600s
        headers = {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET',
            'Access-Control-Allow-Headers': 'Content-Type',
            'Access-Control-Max-Age': '3600'
        }

        return ('', 204, headers)

    # Set CORS headers for the main request
    headers = {
        'Access-Control-Allow-Origin': '*'
    }

    return ('Hello World!', 200, headers)

Для получения дополнительной информации вы можете прочитать документы