问题
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"
}
回答1:
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,
});
};
}
回答2:
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": {
来源:https://stackoverflow.com/questions/65555658/http-proxy-middleware-proxy-is-not-working-in-react-js-and-spring-boot-project