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

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

我正在使用 http-proxy-middleware 中间件。 Content-Type: application/json 必须在使用 postman 执行时添加到 API 的标头中。我在 React 中添加了 API 的标头配置。

我认为错误是由于我没有正确发送标头引起的。其实我不知道。请帮帮我。

谢谢

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

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,})
  );
};

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,});
  };
}

,

我和马赫迪解决了这个问题。我们错过了数据：{} 部分。我在 headers: headers 下添加， 并混合了他和我的代码。我要分享孤独。

moviesAction.js

import axios from 'axios';

const headers = {
    'Content-Type': 'application/json;charset=UTF-8',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",});
    }
}

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 中添加代理

  "name": "movie-frontend","version": "0.1.0","private": true,**"proxy":"http://localhost:8080",**
  "dependencies": {