Tukukkk

I am writing a web map and try to get fetch a JSON from a web ressource I do have credentials for. This works great in Python running via a JuPyteR notebook:

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)

The request from python gives the following header:

'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'

Now I am trying to recreate this in JavaScript to get data in my webmap:

$.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;

          }

The console shows the following header for the preflight Options call:

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

The preflight Options response from the server is successfull in terms of a 200 response. Yet I don't get the POST finished as the console in FF and Chrome gives me:

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

The response header from the Server gives me:

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

As the whole idea works in Python I hope I can "mimicri" the behaviour in Javascript/Jquery as well. So I am looking for your remarks/hints.

Note: The whole thing works in JS when running on Chrome using a CORS plugin...

Python does not check CORS and the browser does to avoid security issues like XSS,

You need to make the server respond the header "Access-Control-Allow-Origin" with the domain from what the endpoint is being called ("https://myCoolServer.azurewebsites.net" ?)

If you want the server to allow being called for any domain use:

"Access-Control-Allow-Origin: *"

( currently is "Access-Control-Allow-Origin: null" )

This is needed because the browser needs to know if that server expect to be called from that domain.

CORS rules are primarily enforced by the client, not by the server. You python script does not implement these rules, hence the request succeeds, but your browser does implement them and blocks the request.

Now the server is supposed to provide information to the client about whether to allow the CORS request. The preflight request is just there to obtain this information (since your request is not a "simple request", cf this doc). In your case, clearly the server is not well configured:

Access-Control-Allow-Origin: null

You should have "*" instead of null, or at least "https://myCoolServer.azurewebsites.net".