Axios GET request with manual proxy setup (http-proxy-middleware) returns HTML instead of Json

Question

I am trying to get data with ReactJS in frontend only (no access to backend). Due to Cors problems I am using manual proxy setup with http-proxy-middleware - file setupProxy.js in src folder. I do not want to use proxy directly in package.json.

In postman I get correct json data, but the axios response is just html with header and footer of requested page, to me it looks like the whole URL is maybe not added to base url.

Expected result URL is this (works in postman): https://www.zbozi.cz/api/v3/product/sonett-tuhe-mydlo-na-ruce-curd-soap-100g/?limitTopOffers=0&limitCheapOffers=10&filterFields=offersData

This is my setupProxy.js:

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
    app.use(
        proxy("/product", {
            target: "https://www.zbozi.cz",
            secure: false,
            changeOrigin: true
        })
    );
};

This is my axios call:

axios
    .get(`/product/api/v3/product/sonett-tuhe-mydlo-na-ruce-curd-soap-100g`,
        {
            headers: {Accept: 'application/json'},
            params: {
                limitTopOffers: 0,
                limitCheapOffers: 10,
                filterFields: "offersData",
            }
        }
    ).then(
    (product) => {
        console.log(product)
    }
)

This is what I get as result. It returns only header and footer of the page www.zbozi.cz, not data.

<!DOCTYPE html><html lang="cs"><head><meta charSet="utf-8"/><title>Zboží.cz - Tisíce obchodů na jednom místě</title><meta name="description" content="Na Zboží.cz jsou produkty včetně popisů, recenzí, příslušenství a návodů. Ceny si navíc můžete srovnat od těch nejlevnějších."/><meta name="szn:status"/><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="next-head-count" content="5"/><meta http-equiv="X-UA-Compatible" content="IE=Edge"/><noscript><meta http-equiv="refresh" content="0;url=?_escaped_fragment_="/></noscript><meta name="referrer" content="origin"/><meta name="seznam-wmt" content="Hyz1YOQsFrCoCFcTDiRJgQEZNSjZpwbf"/><link rel="shortcut icon" href="/img/favicon/favicon.ico?version-9.2.0" type="image/x-icon"/><link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-touch-icon-57x57.png?version-9.2.0"/><link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-touch-icon-60x60.png?version-9.2.0"/><link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-touch-icon-72x72.png?version-9.2.0"/><link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-touch-icon-76x76.png?version-9.2.0"/><link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-touch-icon-114x114.png?version-9.2.0"/><link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-touch-icon-120x120.png?version-9.2.0"/><link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-touch-icon-144x144.png?version-9.2.0"/><link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-touch-icon-152x152.png?version-9.2.0"/><link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon-180x180.png?version-9.2.0"/><meta name="msapplication-TileColor" content="#666666"/><meta name="msapplication-config" content="/img/favicon/browserconfig.xml?version-9.2.0"/><meta name="msapplication-TileImage" content="/img/favicon/mstile-144x144.png?version-9.2.0"/><link rel="search" type="application/opensearchdescription+xml" title="Zboží.cz" href="/zbozi-cz.xml"/><link rel="preload" href="/fonts/TriviaSeznam.woff" as="font" type="font/woff" crossorigin="anonymous"/>
..........

I've tried some magic with adding and not adding "/" in both proxy and axios settings but got the same result. I've tried to add "headers: {Accept: 'application/json'}" to axios but the problem is somewhere else.

Axios GET request with manual proxy setup (http-proxy-middleware) returns HTML instead of Json

0 Answers0