CODEWITHSUNDEEP
reactjsapiproxyaxiosnext.js
Miantian
Miantian

Reputation: 1075

How to fetch json data by axios in react with proxy?

I created an app with next.js. In one of its page, wrote this code:

../pages/index.js

   1   │ import axios from 'axios';
   2   │
   3   │ const Page = ({ data }) => {
   4   │   return (
   5   │     <div>
   6   │       <div>Welcome to Next.js!</div>
   7   │       {data.map((d) => (
   8   │         <p key={d.id}>{d.title}</p>
   9   │       ))}
  10   │     </div>
  11   │   );
  12   │ };
  13   │
  14   │ export const getStaticProps = async () => {
  15   │   const { data } = await axios.get('http://localhost:4000/posts');
  16   │   console.log(data);
  17   │   return {
  18   │     props: {
  19   │       data,
  20   │     },
  21   │   };
  22   │ };
  23   │
  24   │ export default Page

Some packages like this, just prepared next, react and axios.

   1   │ {
   2   │   "name": "app",
   3   │   "version": "1.0.0",
   4   │   "description": "",
   5   │   "main": "index.js",
   6   │   "scripts": {
   7   │     "dev": "next dev",
   8   │     "build": "next build",
   9   │     "start": "next start"
  10   │   },
  11   │   "author": "",
  12   │   "license": "",
  13   │   "dependencies": {
  14   │     "axios": "^0.21.1",
  15   │     "next": "^10.2.2",
  16   │     "react": "^17.0.2",
  17   │     "react-dom": "^17.0.2"
  18   │   }
  19   │ }

When start the app and access it from browser, I got this error:

Server Error
Error: Request failed with status code 504

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Sometimes also got a 403 error.

From the log of the app, I found some information like

app_1  |         responseUrl:
app_1  |          'http://proxy.company.com:12302/http://localhost:4000/posts',
...
app_1  |   isAxiosError: true,
app_1  |   toJSON: [Function: toJSON]

Why it added prefix http://proxy.company.com:12302/? How to set proxy with axios?

Upvotes: 0

Views: 1176

Answers (1)

hilipati
hilipati

Reputation: 531

The URL provided to axios HTTP functions is appended to base URL from context.

You can override the base URL by creating an axios instance and using that for your HTTP calls.

const instance = axios.create({
  baseURL: 'http://localhost:4000'
});

instance.get('/posts').then(
  res => console.log(res, res.data),
  err => console.log(err)
)

More info in the official README

Related issue here

Upvotes: 1

Related Questions