Axios returns index.html content to frontend (React.js)

Question

I am trying to build a web application where I am using React.js for frontend and Flask as the backend. I tried to establish a connection between the frontend and the backend by stating the proxy server in React and CORS in Flask. It works fine in the dev environment. However, when I tried deploying the same code on Heroku any request from frontend would only return index.html junk. I read somewhere that proxy is just meant to be used for development propose and does not work in production. Is there any other alternative that I can try to make this work?

Below is a sample of the data returned by axios -

<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><link href="/static/css/main.43a4cdf3.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,i,p=t[0],f=t[1],l=t[2],c=0,s=[];c<p.length;c++)i=p[c],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(a&&a(t);s.length;)s.shift()();return u.push.apply(u,l||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,p=1;p<r.length;p++){var f=r[p];0!==o[f]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/";var p=this["webpackJsonpspotify-web-api"]=this["webpackJsonpspotify-web-api"]||[],f=p.push.bind(p);p.push=t,p=p.slice();for(var l=0;l<p.length;l++)t(p[l]);var a=f;r()}([])</script><script src="/static/js/2.7cb26d15.chunk.js"></script><script src="/static/js/main.2874591b.chunk.js"></script></body></html>

Axios get request -

  return new Promise((resolve, reject) => {
    axios
      .get('/auth/redirect')
      .then(res => resolve(res.data), err => reject(err));
  });

That code that axios gets is the code that the page is supposed to render in the first place. — J.Ko
– J.Ko, Commented Jul 2, 2020 at 2:42

Pallavi Lohar · Accepted Answer · 2020-07-07 15:27:42Z

2

So I found out on debugging that the application was proxying to itself and all the requests were redirected to the client. I later changed my Axios call to

 return new Promise((resolve, reject) => {
    axios
      .get(base_server_url+'/auth/redirect')
      .then(res => resolve(res.data), err => reject(err));
  });

and it worked!

answered Jul 7, 2020 at 15:27

Pallavi Lohar

711 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hrishikesh Baidya · Accepted Answer · 2021-11-30 10:18:32Z

1

export const fetchPrivacyPolicy = (cb) => {
return (dispatch) => {
 axios.get(APIENDPOINT + "privacy_file").then((res) => {
  if (res.status == 200) {
    cb(res.data);//res data is actually the html content
  }
 });
};
};

import React from "react";

function PrivacyPolicy(props) {
  const [content, setContent] = React.useState(``);

  React.useEffect(() => {
     props.fetchPrivacyPolicy((htmlText) => {
       setContent(htmlText);
     });
  }, []);

  return <div dangerouslySetInnerHTML={{ __html: content }} />;
}

export default PrivacyPolicy;

answered Nov 30, 2021 at 10:18

Hrishikesh Baidya

5874 silver badges8 bronze badges

Comments

joshua · Accepted Answer · 2020-07-02 13:02:10Z

0

Please post your backend code

axios will add current route to url,

so if your current route is /home,

axios may fetch servername+ /home/auth/redirect

you can check url which axios fetch in console

answered Jul 2, 2020 at 13:02

joshua

3351 silver badge9 bronze badges

Collectives™ on Stack Overflow

Axios returns index.html content to frontend (React.js)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related