While working with Vue.js 2, I encountered an issue with my ajax call using axios. Everything was working fine until I navigated to another page and returned to the page with the ajax call, where it suddenly started returning html instead of json objects.
I'm puzzled by this behavior. When I tested the URL in Postman, I received json data without any issues.
It's worth mentioning that my back-end is built with Laravel 5.5.
Here is the HTML response I received:
<!DOCTYPE html>\n<!--[if IEMobile]><html class=\"no-js iemobile\" lang=\"nl\"><![endif]-->\n<!--[if lt IE 7 ]><html class=\"no-js ie6\" lang=\"nl\"><![endif]-->\n<!--[if IE 7 ]><html class=\"no-js ie7\" lang=\"nl\"><![endif]-->\n<!--[if IE 8 ]><html class=\"no-js ie8\" lang=\"nl\"><![endif]-->\n<!--[if IE 9 ]><html class=\"no-js ie9\" lang=\"nl\"><![endif]-->\n<!--[if (gte IE 9)|!(IE)]><!--><html class=\"no-js\" lang=\"nl\"><!--<![endif]-->\n<head>\n\t<!-- Google Tag Manager -->\n<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\n new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\n j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\n 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\n })(window,document,'script','dataLayer','GTM-TP9MVZN');</script>\n<!-- End Google Tag Manager -->\n <meta data-required=\"true\" http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>\n\n<title>Televisions </title>\n\n<meta d…", status: 200, statusText: "OK", headers: {…}, config: {…}, request: XMLHttpRequest }
My Axios call in Vue.js code is as follows:
Axios.get(url, { params: params }).then((response) => {
console.log(response);
});
In my app.js file, I have set the header using the following code:
Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
Any insights or suggestions on resolving this issue would be greatly appreciated. Thank you.