http-proxy-middleware 代理在 React js 和 Spring Boot 项目中不起作用。 GET API 返回 415 状态错误

Posted 2023-04-12

【中文标题】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":