How to use JSONP on fetch/axios cross-site requests

Ran into the problem in a React Application

Axios doesn't support JSONP they offers alternatives to perform jsonp requests:

Follow this link to see some documentation for jsonp for axios: axios: https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp

Here is my documentation:

Step 1: $ npm install jsonp --save

Step 2:

import jsonp from 'jsonp';

(this goes at the top of your component)

Step 3: Create a method in your React Component:

JSONP () {
        jsonp( "https://*YourUrlHere.jsonp", { name: 'Name Of JSONP Callback Function' }, (error, data) => {
            if (error) {
                this.setState({
                    error,
                });
            } else {
                this.setState({
                    data: data,
                });
            }
        });
    }

I found that the problem is not related to the content-type of the requests.

The problem was due to the fact that the APIs (fetch and axios) does not support jsonp requests. The use of jsonp was not clear enough for me, I could find a good explanation here: http://stackoverflow.com/a/6879276/4051961

Although they don't support it, they offers alternatives to perform jsonp requests:

axios: https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp
fetch: https://www.npmjs.com/package/fetch-jsonp

Recommended way to access JSONP with axios is actually to not use axios:

1. The Discussion on Why (not)

2. A similar question

3. Alternative Suggestion from Axios

In short install:

npm install jsonp --save

use it like:

var jsonp = require('jsonp');

jsonp('http://www.example.com/foo', null, function (err, data) {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});