已配置@CrossOrigin仍遇400错误，餐厅应用POST请求问题求助

已在Spring Boot的FoodController上添加@CrossOrigin注解配置跨域，但前端发起POST请求时仍出现以下错误：

Failed to load resource: the server responded with a status of 400 ()

怀疑问题出在POST请求的参数传递或后端接收方式上，以下是相关代码：

前端React代码 #

import { useEffect, useState } from "react";
import axios from 'axios';
import JSOG from "jsog";
export function Food(props){
    let [name,setName]=useState("");
    let[description,setDescription]=useState("");
    const [selectedImage, setSelectedImage] = useState(null);
    let [price,setPrice]=useState(0);
        let initialize=(id)=>{
            if(props.id){
            let path='http://localhost:8080/food/'+this.props.id;
             axios.get(path)
                 .then(res => {
                    let target="";
                    target = JSOG.stringify(res.data);
                    let newObject= JSOG.parse(target);
                    let food=newObject;
                    setName(food.name);
                    setDescription(food.description);
                    setSelectedImage(food.url);
                    setPrice(food.price);

               }).catch(
               function (error) {
                console.log(error);
              });}
        }
        //提交函数
        let submit=async(event)=>{
            event.preventDefault();
            let path="http://localhost:8080/food";
            if(!props.id){
              await  axios.post(
                    path,{name:name,description:description,url:selectedImage,price:price})
                    .then(res => {
                        
                    }).catch(
                    function (error) {
                    console.log(error.toString());
                    });
            }
            else{
                path+="/exist";
                axios.post(
                    path,{ id: props.id ,name:name,description:description,url:selectedImage.name,price:price})
                    .then(res => {
                        
                    }).catch(
                    function (error) {
                    console.log(error);
                    });
            }
           
        }
        useEffect(() => {
        if(props.id){
            initialize(props.id);
        }});
let Remove=async()=>{
    if(props.id)
    await axios.delete('http://localhost:8080/food/'+props.id).catch(
        function (error) {
            console.log(error);
        });
}
    return(<div>
        <form onSubmit={submit} >
             <img src={selectedImage} alt="no image" />
            <div>
                <label htmlFor="title" >Title:</label>
                <input type="text" id="title" name="title" onChange={(e)=>{setName(e.target.value)}} value={name}/>
            </div>

            <div>
                <label htmlFor="description" >Description:</label>
                <input type="text" id="description" name="description" onChange={(e)=>{setDescription(e.target.value)}} value={description}/>
            </div>
            <div>
                <label htmlFor="url" >Url:</label>
               
                <input
                    type="file"
                    name="url"
                    onChange={(event) => {
                    console.log(event.target.files[0]);
                    setSelectedImage(event.target.files[0]);
                    }}
                /> </div>
            <div>
                <label htmlFor="price" >Price:</label>
                <input type="number" id="" name="price" onChange={(e)=>{setPrice(e.target.value)}} value={price}/>
            </div>

            <input type="submit" value="Save" />
            
        </form>
        <button onClick={Remove} >Remove</button></div>
    );
}

后端Spring Boot FoodController代码 #

@RestController
@RequestMapping("/food")
@CrossOrigin
public class FoodController implements Serializable {
    private static final long serialVersionUID = 1L;
    @Autowired
    FoodServices foodServices;
    @Autowired
    JasyptConfig jasyptConfig;

    @GetMapping
    public List<Food> getfoods() {
        return foodServices.getfoods();
    }

    @GetMapping("/{id}")
    public Food getfood(@PathVariable Long id) throws MessagingException, IOException {
        Food food=foodServices.getFoodById(id);
        return food;
    }
    @GetMapping("/byName/{name}")
    public Food getfoodByName(@PathVariable String name) throws MessagingException, IOException {
        Food food=foodServices.getFoodByName(name);
        return food;
    }
    @PostMapping
    public ResponseEntity createfood(@RequestParam String name,@RequestParam String description,@RequestParam String url,@RequestParam float price) throws URISyntaxException {
        Food food=new Food(name,description,url,price);
        foodServices.saveFood(food);
        return ResponseEntity.ok().build();
    }
    @PostMapping("/exist")
    public ResponseEntity createfood(@RequestParam long id,@RequestParam String name,@RequestParam String description,@RequestParam String url,@RequestParam float price) throws URISyntaxException {
        Food food=foodServices.getFoodById(id);
        food.setName(name);
        food.setDescription(description);
        food.setUrl(url);
        food.setPrice(price);
        foodServices.saveFood(food);
        return ResponseEntity.ok().build();
    }
    @DeleteMapping("/{id}")
    public ResponseEntity deletefood(@PathVariable Long id) {
        foodServices.removeFood(id);
        return ResponseEntity.ok().build();
    }
}

已尝试调试和查阅相关教程，但问题仍未解决。相关项目仓库：

• 前端：divinaPopinaFrontEnd
• 后端：DivinaPopinaBackEnd

内容的提问来源于stack exchange，提问作者livecode