Доступ к извлечению из источника localhost заблокирован политикой CORS, а публикация с использованием ajax - нет. Почему? - PullRequest
Новая
       8

Доступ к извлечению из источника localhost заблокирован политикой CORS, а публикация с использованием ajax - нет. Почему?

0 голосов
/ 03 октября 2019

Это не проблема для CORS, поэтому не предлагайте обходных путей с плагинами браузера или изменений в коде сервера. Я просто хочу понять, почему ajax post работает, а fetch post - нет!

В настоящее время используется jQuery и ajax для получения и публикации. Создание почтового запроса от localhost с ajax работает без проблем с запросом, подобным следующему: 

$.ajax({
    type: 'POST',
    url: 'https://api.example.com/endpoint',
    cache: false,
    data: {
        moment: {
            parameters: 'some params',
            url: 'https://example.com',
            caption: 'caption'
        }
    }
})

Я решил начать использовать fetch вместо ajax, но делать то, что «выглядит» как тот же запроспри извлечении из тех же условий локального хоста происходит сбой с сообщением об ошибке

Доступ к извлечению в 'http://api.example.com/endpoint' из источника' http://localhost' заблокирован политикой CORS: Ответ напредварительный запрос не проходит проверку контроля доступа: он не имеет статуса HTTP ok.

Запрос на выборку выглядит примерно так: 

fetch('https://api.example.com/endpoint', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    cache: 'no-cache',
    body: JSON.stringify({
        moment: {
            parameters: 'some params',
            url: 'https://example.com',
            caption: 'caption'
        }
    })
})

Я просто хочу понять, чтоJQuery делает, чтобы обойти это? Я искал источник на github и не вижу ничего особенного. Или это ограничения, добавленные в API выборки, которых нет у XMLHttpRequest?

РЕДАКТИРОВАТЬ:

На вкладке сети запрос ajax выглядит следующим образом: 

General
    Request URL: https://api.example.com/endpoint
    Request Method: POST
    Status Code: 200 OK
    Remote Address: ip:80
    Referrer Policy: no-referrer-when-downgrade

Headers
    Accept: */*
    Content-Type: application/x-www-form-urlencoded; charset=UTF-8
    DNT: 1
    Referer: http://localhost/index.html?target=...
    User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36

Хотя запрос на выборку выглядит следующим образом: 

General
    Request URL: https://api.example.com/endpoint
    Referrer Policy: no-referrer-when-downgrade

Headers
    Content-Type: application/json
    DNT: 1
    Referer: http://localhost/index.html?target=...
    User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36

Добавление всех этих заголовков из ajax в запрос на выборку не имеет значения.

1 Ответ

0 голосов
/ 08 октября 2019

Проблема оказалась тройной.

  1. Что прокомментировал Рори, jQuery ничего не меняет на CORS. Это была моя ошибка, у меня было две конечные точки: одна для разработки, которая принимает междоменные вызовы, а другая - нет, они выглядели очень похожими и ведут себя одинаково, за исключением CORS.
  2. jQuery по умолчанию устанавливает заголовок Content-Type равным application/x-www-form-urlencoded; charset=UTF-8, если он не указан. Fetch по умолчанию не указывает на что-либо конкретное.
  3. jQuery также анализирует данные, отправленные автоматически, в формат, принятый бэкэндами php и ruby. Это выглядит примерно так:

this: 

moment[parameters]: value
moment[url]: value
moment[caption]: value

Поэтому мне пришлось написать свою собственную версию функции $ .param () jQuery, так как я не нашел ничего в Javascript, которыйтакже может кодировать дочерние объекты.

...