http-proxy-middleware proxy is not working in React js and Spring Boot project. GET API is return 415 status error

Question

I'm using the http-proxy-middleware middle ware. Content-Type: application/json is must be add in API's headers while execute with postman. I added my API's header configuration in React.

I think the error is caused by I dont send headers corrently. Actually I dont know. Please help me.

Thanks

Spring Boot

MovieController.java

@RestController
@RequestMapping("/movie")
public class MovieController {

    @Autowired
    private IMovieService movieService;

    @GetMapping(value = "/fetchAllMovieList", produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)
    public ResponseEntity<List<Movie>> fetchAllMovieList() {
        return new ResponseEntity<>(movieService.fetchAllMovieList(), HttpStatus.OK);
    }
}

React

movieAction.js

import {API_BASE} from "../config/env";
import axios from 'axios';

const headers = {
    'Content-Type': 'application/json;charset=UTF-8',
    "Access-Control-Allow-Origin": "*",
    "Accept": "application/json"
}

export function fetchMovies() {
    return dispatch => {
        dispatch({
            type: "FETCH_MOVIES",
            payload: axios.get(`${API_BASE}/movie/fetchAllMovieList`, {
                headers: headers
            }).then(response => console.log("Action/moviesAction.js -> response -> ", response))
        })
    }
}

setupProxy.js

import {API_BASE} from "./env";
const createProxyMiddleware = require("http-proxy-middleware");

module.exports = function (app) {
    app.use(
        createProxyMiddleware("/movie/fetchAllMovieList",{
            target: `${API_BASE}`,
            changeOrigin: true
        })
    );
};

env.js

export const API_BASE = "http://localhost:8080";

Results in Console

GET http://localhost:8080/movie/fetchAllMovieList 415
Uncaught (in promise) Error: Request failed with status code 415
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:62)

Results in Network

{
  "timestamp": "2021-01-04T07:24:51.116+00:00",
  "status": 415,
  "error": "Unsupported Media Type",
  "message": "",
  "path": "/movie/fetchAllMovieList"
}

Mahdi Sheibak · Accepted Answer · 2021-01-04 11:31:17Z

0

I looked more closely at the code and noticed many mistakes. This is true.

env.js

module.exports = {
  API_BASE: "http://localhost:8000",
};

add this to package.json

"proxy":"http://localhost:8000",

setupProxy.js

const { createProxyMiddleware } = require("http-proxy-middleware"); // import module
const { API_BASE } = require("./env");

module.exports = function (app) {
  app.use(
    "/movie/",
    createProxyMiddleware({
      target: API_BASE,
      changeOrigin: true,
    })
  );
};

movieAction.js

import axios from "axios";

const headers = {
  "Content-Type": "application/json;charset=UTF-8",
  "Access-Control-Allow-Origin": "*",
  Accept: "application/json",
};

export function fetchMovies() {
  console.log("action run...");
  return async (dispatch) => {
    console.log("async action run..");

    const response = await axios.get(`/movie/fetchAllMovieList`, {
      headers: headers,
    });

    console.log(response.data);

    dispatch({
      type: "FETCH_MOVIES",
      payload: response.data,
    });
  };
}

edited Jan 4, 2021 at 11:31

answered Jan 3, 2021 at 22:51

Mahdi Sheibak

7581 gold badge5 silver badges14 bronze badges

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

4 Comments

Tolunay Toprakkaya Over a year ago

Thanks for your comment but unfortunately result is still same. I was execute this one "npm install --save-dev http-proxy-middleware". I deleted related section in package.json and I executed this one"npm install http-proxy-middleware --save". And I changed setupProxy.js like your comment

Tolunay Toprakkaya Over a year ago

Now try to go to api like this; localhost:3000/movie/fetchAllMovieList. API is return 404 now I wonder if setupProxt doesn't work ? I gave localhost 8080 port in that class

Tolunay Toprakkaya Over a year ago

I searched some web sites. We was should add data: {} under the headers: headers, I mixed your and mine codes I'm going to comment final situation and close this question. Thank you so much

Mahdi Sheibak Over a year ago

OK. Glad I helped you.

Tolunay Toprakkaya · Accepted Answer · 2021-01-04 14:51:00Z

I and Mahdi solved that problem. We missed data:{} part. I added under the headers: headers, and mixed him and mine codes. I'm going to share solition.

moviesAction.js

import axios from 'axios';

const headers = {
    'Content-Type': 'application/json;charset=UTF-8',
    "Access-Control-Allow-Origin": "*",
    Accept: "application/json"
}

export function fetchMovies() {
    return async dispatch => {
        const response = await axios.get(`/movie/fetchAllMovieList`, {
            headers: headers,
            data: {}
        });

        console.log("Action/moviesAction.js -> response -> ", response);

        dispatch({
            type: "FETCH_MOVIES",
            payload: response.data,
        });
    }
}

setupProxy.js

import {API_BASE} from "./env";
const {createProxyMiddleware} = require("http-proxy-middleware");

module.exports = function (app) {
    app.use("/movie/fetchAllMovieList",
        createProxyMiddleware({
            target: `${API_BASE}`,
            changeOrigin: true
        })
    );
};

env.js

export const API_BASE = "http://localhost:8080";

Add proxy in package.json

  "name": "movie-frontend",
  "version": "0.1.0",
  "private": true,
  **"proxy":"http://localhost:8080",**
  "dependencies": {

Collectives™ on Stack Overflow

http-proxy-middleware proxy is not working in React js and Spring Boot project. GET API is return 415 status error

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related