reactjs - http-proxy-middleware 代理在 React js 和 Spring Boot 项目中不起作用。GET API 返回 415 状态错误
问题描述
我正在使用http-proxy-middleware 中间件。Content-Type:应用程序/json 必须在使用邮递员执行时添加到 API 的标头中。我在 React 中添加了我的 API 的标头配置。
我认为该错误是由于我没有正确发送标头引起的。其实我不知道。请帮我。
谢谢
弹簧靴
电影控制器.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);
}
}
反应
电影动作.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
})
);
};
环境.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"
}
解决方案
我更仔细地查看了代码,发现了许多错误。这是真的。
环境.js
module.exports = {
API_BASE: "http://localhost:8000",
};
将此添加到 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,
})
);
};
电影动作.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,
});
};
}
推荐阅读
- javascript - 对数组值进行分组并添加属性
- c# - 窗口大小与我在设计器中的大小不符
- laravel - Laravel 请求/验证总是返回字符串类型值
- angular - 量角器 - 等待 Angular 10 应用程序总是失败
- java - 如何在java控制台中屏蔽密码输入
- r - 在没有 e 格式的 R 中显示剪切类别
- c++ - 我们可以验证 boostlog 核心确实删除了接收器吗?
- angular - Angular 测试 - 如果计时器在组件初始化中,Tick 不起作用
- windows - 一台显示器上有多个 hdmi 输入屏幕
- r - 使用 dplyr 和 group_by 计算一个值的重复次数