Issue when making POST requests to Wolfram Cloud APIs using JavaScript

Question

I am having trouble making POST requests from JavaScript to Wolfram Cloud APIs.

Here is a minimal example to reproduce the issue:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test API</title>
    <script type="text/javascript">

    // Wolfram API
    fetch('https://www.wolframcloud.com/objects/c11abdbe-d203-406d-a6d3-a212d900c273', {
      method: 'POST',
      body: JSON.stringify({city1: 'London', city2:'Paris'}),
    })
    .then(response => response.json())
    .then(json => console.log(json))

    // Other Test API
    fetch('https://httpbin.org/post', {
      method: 'POST',
      body: JSON.stringify({city1: 'London', city2:'Paris'}),
    })
    .then(response => response.json())
    .then(json => console.log(json))

    </script>
  </head>
  <body>
    Testing the wolframcloud API
  </body>
</html>

The top fetch attempt is trying to call the Wolfram API introduced here https://reference.wolfram.com/language/workflow/DeployAWebAPI.html, but I get the error:

Failure: "The API could not be evaluated because there is no input for fields: \"city1\", \"city2\"."

However, the second fetch attempt with a different Test API succeeds with no issues.

Also, by comparison I have no problems calling the API from Python:

import urllib3

http = urllib3.PoolManager()

# Wolfram API
r1 = http.request('POST',
    'https://www.wolframcloud.com/objects/c11abdbe-d203-406d-a6d3-a212d900c273',
    fields={'city1': 'London', 'city2':'Paris'})
r1.status
r1.data

# Other Test API
r2 = http.request('POST',
    'http://httpbin.org/post',
    fields={'city1': 'London', 'city2':'Paris'})
r2.status
r2.data

So I wonder whether this is an issue specific to the interaction between JavaScript and Wolfram APIs? Thanks!

Leonid Shifrin · Accepted Answer · 2020-04-09T12:16:12.197

3

You have the wrong content type header in your request. Apparently, it expects 'application/x-www-form-urlencoded', so this will work:

const url = "https://www.wolframcloud.com/objects/c11abdbe-d203-406d-a6d3-a212d900c273";

const params = {city1: 'London', city2:'Paris'}

const encodeBody = params => Object
  .keys(params)
  .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))
  .join('&');


fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  },
  body: encodeBody(params)
})
.then(response => response.json())
.then(json => console.log(json))

You can look e.g. here for more details.

edited Apr 09 '20 at 12:16

answered Apr 09 '20 at 12:10

Leonid Shifrin

114,335
15
329
420

Amazing, thank you for your quick reply! :) – Andrea Dimitracopoulos Apr 09 '20 at 14:35
@AndreaDimitracopoulos Was glad to help. Thanks for the accept. – Leonid Shifrin Apr 09 '20 at 15:12
just in case you know, would this work also for sending an image (instead of text) or would I need something different? Thank you again! – Andrea Dimitracopoulos Apr 09 '20 at 17:25
1

@AndreaDimitracopoulos If you want to send an image as a file to the server / cloud, you would need to sent a multi-part request. The server should be prepared to handle it. Here is a simple example that might get you started. I have not done that myself for the cloud, so can't tell what kind of possible obstacles you may face on the server / cloud side. I actually would recommend to ask this as a separate question, after you try a few things yourself, in case if you encounter problems. – Leonid Shifrin Apr 09 '20 at 17:52
OK thank you again for your help! :) – Andrea Dimitracopoulos Apr 09 '20 at 18:11
@AndreaDimitracopoulos Sure, np – Leonid Shifrin Apr 09 '20 at 18:13

Issue when making POST requests to Wolfram Cloud APIs using JavaScript

1 Answers1