http-proxy-middleware 代理在 React js 和 Spring Boot 项目中不起作用.GET API 返回 415 状态错误 [英] http-proxy-middleware proxy is not working in React js and Spring Boot project. GET API is return 415 status error
问题描述
我正在使用 http-proxy-middleware 中间件.Content-Type: application/json 必须在使用 postman 执行时添加到 API 的标头中.我在 React 中添加了 API 的标头配置.
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.
谢谢
Spring Boot
电影控制器.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);
}
}
反应
movieAction.js
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
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
})
);
};
环境.js
export const API_BASE = "http://localhost:8080";
控制台中的结果
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)
网络中的结果
{
"timestamp": "2021-01-04T07:24:51.116+00:00",
"status": 415,
"error": "Unsupported Media Type",
"message": "",
"path": "/movie/fetchAllMovieList"
}
推荐答案
我和 Mahdi 解决了这个问题.我们错过了数据:{} 部分.我在 headers: headers 下添加了, 并混合了他和我的代码.我要分享孤独.
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
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
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
})
);
};
环境.js
export const API_BASE = "http://localhost:8080";
在 package.json 中添加代理
Add proxy in package.json
"name": "movie-frontend",
"version": "0.1.0",
"private": true,
**"proxy":"http://localhost:8080",**
"dependencies": {
这篇关于http-proxy-middleware 代理在 React js 和 Spring Boot 项目中不起作用.GET API 返回 415 状态错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!