http-proxy-middleware 代理在 React js 和 Spring Boot 项目中不起作用。 GET API 返回 415 状态错误
Posted
技术标签:
【中文标题】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 【发布时间】:2021-04-09 19:57:44 【问题描述】:我正在使用 http-proxy-middleware 中间件。 Content-Type:应用程序/json 必须在使用邮递员执行时添加到 API 的标头中。我在 React 中添加了我的 API 的标头配置。
我认为错误是由于我没有正确发送标头引起的。其实我不知道。请帮帮我。
谢谢
春季启动
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);
反应
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";
控制台中的结果
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"
【问题讨论】:
遵循 *** 的指导方针,如果代码/错误/日志可以以文本格式表示,则应以文本格式提供,以便可以搜索。不是图像。你能参考下面的指南并更正吗? how-to-ask / do-not-upload-images-of-code-errors 感谢您的评论。我会阅读您发布的链接上的文章。 【参考方案1】:我更仔细地查看了代码,发现了许多错误。这是真的。
env.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,
)
);
;
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,
);
;
【讨论】:
感谢您的评论,但不幸的是结果仍然相同。我正在执行这个“npm install --save-dev http-proxy-middleware”。我删除了 package.json 中的相关部分,并执行了这个“npm install http-proxy-middleware --save”。我像您的评论一样更改了 setupProxy.js 现在试试这样去api; localhost:3000/movie/fetchAllMovieList。 API 现在返回 404 我想知道 setupProxt 是否不起作用?我在那个类中给了 localhost 8080 端口 我搜索了一些网站。我们应该在headers: headers,
下添加data:
我混合了你和我的代码我将评论最终情况并关闭这个问题。非常感谢
好的。很高兴我帮助了你。【参考方案2】:
我和马赫迪解决了这个问题。我们错过了 data: 部分。我在 headers: headers, 下添加了他和我的代码。我要分享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";
在 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 状态错误的主要内容,如果未能解决你的问题,请参考以下文章
React18使用 http-proxy-middleware代理跨域
node+express+http-proxy-middleware做代理
http-proxy-middleware 代理在 React js 和 Spring Boot 项目中不起作用。 GET API 返回 415 状态错误
使用axios以及http-proxy-middleware代理处理跨域的问题