Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I'm trying to do a GET request on wikipedia API. Using jQuery as below works fine:

$.ajax({
  url: 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Test&callback=JSON_CALLBACK',
  type: 'GET',
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  crossDomain: true,
  dataType: 'jsonp'
}).done(function(data) {
  console.log("Data: ", data);  
});

But I want to use fetch or axios api, which stops at pre-flight with request method: OPTIONS. Why it works in jQuery but not in the other APIs?

axios.get('https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Test&callback=JSON_CALLBACK', 
    { headers: {'X-Requested-With': 'XMLHttpRequest',
                'content-type': 'text/plain'}
    })
    .then(function (response) {
        console.log("Response: ", response);  
    });

I saw that it might be related to the Content-Type of the GET request, on jQuery the default seems to be text/plain, however I didn't have success when trying to alter the content-type of fetch/axios requests which are being sent as text/html.

Any thoughts on what might be the problem?

like image 221
Luan Scudeler Avatar asked Apr 18 '17 11:04

Luan Scudeler


People also ask

Does Axios support JSONP?

It seems axios does not support jsonp call · Issue #342 · axios/axios · GitHub.

What does JSONP use for request?

JSONP stands for JSON with Padding. Requesting a file from another domain can cause problems, due to cross-domain policy. Requesting an external script from another domain does not have this problem. JSONP uses this advantage, and request files using the script tag instead of the XMLHttpRequest object.

Can JSONP be used with Ajax?

JSONP has nothing to do with Ajax, since it does not use XMLHttpRequest. Instead, it dynamically inserts <script> tag into a webpage.

What is a JSONP callback?

JSONP is an unofficial protocol that allows making cross domain calls by generating script tags in the current document and expecting a result back to calls a specified callback handler. The client JavaScript code to make a JSONP call looks like this: function jsonp(url,callback,name, query) { if (url.indexOf("?") > -


2 Answers

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

like image 51
Luan Scudeler Avatar answered Oct 28 '22 11:10

Luan Scudeler


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);
  }
});
like image 28
DominikAngerer Avatar answered Oct 28 '22 13:10

DominikAngerer