Запрос предварительной проверки JQuery CORS

Я пишу веб-карту и пытаюсь получить JSON из веб-ресурса, для которого у меня есть учетные данные. Это отлично работает в Python, работающем через блокнот JuPyteR:

import requests
header = {  "Accept": "application/json, text/plain, */*",
        "Accept-Language": "de-DE",
        "Content-Type": "application/json",
        "Pragma": "no-cache",
        "Cache-Control": "no-cache",
        "Origin": "https://myCoolServer.azurewebsites.net"}
}
dataJSON = json.dumps({ "username": "XXX",
    "password": "XXX"}).encode('utf8')
url = "URL/v1/token"
r = requests.post(url, data=dataJSON, headers=header)

Запрос от python дает следующий заголовок:

'User-Agent': 'python-requests/2.19.1', 
'Accept-Encoding': 'gzip, deflate', 
'Accept': 'application/json, text/plain, */*', 
'Connection': 'keep-alive', 
'Accept-Language': 'de-DE', 
'Content-Type': 'application/json', 
'Pragma': 'no-cache', 
'Cache-Control': 'no-cache', 
'Content-Length': '67',
'Origin': 'https://myCoolServer.azurewebsites.net'

Теперь я пытаюсь воссоздать это в JavaScript, чтобы получить данные на моей веб-карте:

$.ajax ({
          method: 'POST',
          data: JSON.stringify({ "username": name,
    "password": pass}),
    headers:  {
        "Accept": "application/json, text/plain, */*",
        "Accept-Language": "de-DE",
        "Content-Type": "application/json",
        "Pragma": "no-cache",
        "Cache-Control": "no-cache"
      },
          dataType:'json',
          url:'URL/v1/token',
          error: function() {
            alert("Login failed. Check username/password!");
          },
          success: function(resp) {

            token=resp.token;
          }

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

Host: "cool API"
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: de-DE
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: POST
Access-Control-Request-Headers: cache-control,content-type,pragma
Origin: https://myCoolServer.azurewebsites.net
DNT: 1
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

Ответ сервера Preflight Options является успешным с точки зрения ответа 200. Тем не менее, я не завершаю POST, поскольку консоль в FF и Chrome дает мне:

Origin https://myCoolServer.azurewebsites.net not found in Access-Control-Allow-Origin header.

Заголовок ответа от Сервера дает мне:

HTTP/1.1 200 OK
Date: Mon, 19 Nov 2018 08:07:30 GMT
Server: Apache/2.4.18 (Ubuntu)
Cache-Control: no-cache, private
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: POST, PUT, GET, DELETE, OPTIONS
Access-Control-Allow-Headers: cache-control,content-type,pragma
Access-Control-Max-Age: 3600
Access-Control-Allow-Origin: null
Content-Length: 0
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

Поскольку вся идея работает в Python, я надеюсь, что смогу «имитировать» поведение в Javascript / JQuery. Так что я ищу ваши замечания / подсказки.

Примечание: все это работает в JS при запуске в Chrome с использованием подключаемого модуля CORS ...

Покажите конфигурацию CORS вашего сервера - похоже, есть проблема (в Access-Control-Allow-Origin: null)

Kamil Kiełczewski 19.11.2018 09:33

тогда он не должен работать и на python на моем локальном компьютере, не так ли?

Riccardo 19.11.2018 09:43

это зависит ... от вашего происхождения для запроса от python - разница должна быть там

Kamil Kiełczewski 19.11.2018 09:45

изменен пост для ясности

Riccardo 19.11.2018 09:53

вы показываете свои заголовки Ajax RESPONSE, но показываете заголовки ajax REQUEST (хром> консоль> сети> ваш запрос)

Kamil Kiełczewski 19.11.2018 09:55

а также: Показать конфигурацию CORS вашего сервера

Kamil Kiełczewski 19.11.2018 09:59

Это не мой сервер, у меня просто есть учетные данные для API

Riccardo 19.11.2018 10:03

Ваш python отправляет запрос с вашего локального компьютера - то же самое, с которого ваш запрос отправки ajax. Если да - где в вашем питоне вы установили: 'Origin': 'https://myCoolServer.azurewebsites.net'

Kamil Kiełczewski 19.11.2018 10:10

Ваш python 'Accept': 'application/json, text/plain, */*' отличается от вашего ajax POST Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=‌​0.8 - это также может вызвать проблемы

Kamil Kiełczewski 19.11.2018 10:15

да, как указано, заголовок почтового запроса ajax не отображается в сетевом мониторе, поскольку ajax создает предварительный запрос. Заголовок запроса для этого показан здесь.

Riccardo 19.11.2018 10:18

Позвольте нам продолжить обсуждение в чате.

Riccardo 19.11.2018 14:51
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
11
483
2

Ответы 2

Python не проверяет CORS, а браузер делает это, чтобы избежать проблем с безопасностью, таких как XSS,

Вам нужно, чтобы сервер отвечал на заголовок «Access-Control-Allow-Origin» с доменом, из которого вызывается конечная точка («https://myCoolServer.azurewebsites.net»?)

Если вы хотите, чтобы сервер разрешал вызов для любого использования домена:

"Access-Control-Allow-Origin: *"

(в настоящее время "Access-Control-Allow-Origin: null")

Это необходимо, потому что браузеру нужно знать, ожидает ли этот сервер вызова из этого домена.

Правила CORS в первую очередь применяются клиентом, а не сервером. Ваш скрипт python не реализует эти правила, следовательно, запрос выполняется успешно, но ваш браузер делает реализует их и блокирует запрос.

Теперь сервер должен предоставить клиенту информацию о том, разрешить ли запрос CORS. Предварительный запрос нужен только для получения этой информации (поскольку ваш запрос не является «простым запросом», см. этот документ). В вашем случае явно сервер плохо настроен:

Access-Control-Allow-Origin: null

У вас должно быть «*» вместо нуля или хотя бы «https://myCoolServer.azurewebsites.net».

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