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

JSONP (JSON with Padding) is an outdated cross-domain data exchange format that bypasses the same-origin policy by dynamically creating <script> tags. Although CORS (Cross-Origin Resource Sharing) is now recommended as the solution for cross-domain requests, there are scenarios where JSONP may still be necessary.

Fetch API natively does not support JSONP because it is designed with Promises in mind, and JSONP's operational mechanism conflicts with Fetch API's design principles. Therefore, if you need to use Fetch to make a JSONP request, it cannot be directly implemented; you will need to implement it yourself.

Similarly, Axios does not natively support JSONP. However, you can manually implement it or use third-party libraries to handle JSONP requests. Here is an example of how to initiate a JSONP request on the client side using Axios in combination with a third-party library such as jsonp:

javascript
// Import Axios and the jsonp library
import axios from 'axios';
import jsonpAdapter from 'axios-jsonp';

// The API URL for the JSONP request
const jsonpUrl = 'https://example.com/api/jsonp?callback=?';

// Use Axios to make the request, configuring the adapter to jsonpAdapter
axios({
    url: jsonpUrl,
    adapter: jsonpAdapter
})
.then(response => {
    // Handle the response
    console.log(response.data);
})
.catch(error => {
    // Handle the error
    console.error(error);
});

In the above code:

1. We import axios and axios-jsonp.
2. When calling axios, we configure the adapter option to jsonpAdapter, enabling Axios to support JSONP requests.
3. Afterwards, you handle responses or errors as you would with any standard Axios request.

Note that JSONP only supports GET requests. Additionally, since JSONP essentially loads scripts via <script> tags, it poses security risks as it may execute malicious code. Furthermore, JSONP does not support error handling, so you cannot capture errors as you would with a standard AJAX request when network or server errors occur.

In modern web development practices, CORS is a safer and more flexible solution for cross-domain requests and is supported by all modern browsers. Therefore, it is recommended to use CORS instead of JSONP whenever possible.