无法使用 Axios 向 NestJS 端点发出 Post 请求

Question

I got a react Component that does a post request to an NestJS endpoint and for some reason i cant provide a body. Every time i attach an object to the body i will get an error in the console saying "Error: Network Error".

If i just provide a string in my axios post i will get a response from the NestJs server.

And everything works fine if i try it with Postman.

Request in React:

const getImage = async () => {
            try {
                const result = await Axios.post('http://localhost:8081/abstract/image', {test: 'asd'}  )
            } catch (e) {
                console.log(e)
            }
        }

NestJS Controller:

@Post('image')
@Header('Content-Type', 'image/png')
@Header('Access-Control-Allow-Origin', '*')
@Header("Access-Control-Allow-Credentials", "true")
@Header('Access-Control-Allow-Methods', 'GET,HEAD,OPTIONS,POST,PUT')
@Header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers")
async getImageBuffer(
    @Body() completeBody
) {
    console.log(completeBody)
}

Answer 1

If you are using create-react-app to build your react app, consider adding proxy to your package.json file like this:

{
  "name": "your-awesome-app",
  "version": "whatever-version-it-is",
  "proxy": "http://localhost:8081"
  "dependencies": {... all your dependencies}
  "devDependencies": {... all your devDependencies}
}

And change your code like this:

const getImage = async () => {

   try {
       const result = await 
       Axios.post('abstract/image', {test: 'asd'}  )
   } catch (e) {
       console.log(e)
   }
}