Nsryjdtyk

I use create-react-app to do my front end, and use the Dragger component inside antd's upload. My backend is springboot. My front end sends request data to the backend using fetch, which will cause cross-domain problems. So I added "proxy" in the package.json file of create-react-app: "http://localhost:8080" to proxy my backend, which solves the trouble of cross-domain, but when I use antd official website The uploader's Dragger component always reports an error when uploading.

This is my code for using Antd's Dragger.

import React, { Component } from 'react';

import { Upload, Icon, message } from 'antd';

import './UpVideo.css';

const Dragger = Upload.Dragger;

export default class UpVideo extends Component {

render(){



    const props = {

        name: 'file',

        multiple: false,

        headers:{

            'Access-Control-Allow-Origin':'*',

            'Access-Control-Allow-Methods':'POST',



        },

        action: 'http://localhost:8080/vidoe/up',

        onChange(info) {

        //   const status = info.file.status;

          console.log(info);

        //   if (status !== 'uploading') {

        //     console.log(info.file, info.fileList);

        //   }

        //   if (status === 'done') {

        //     message.success(`${info.file.name} file uploaded successfully.`);

        //   } else if (status === 'error') {

        //     message.error(`${info.file.name} file upload failed.`);

        //   }

        },

      };



    return(

        <div>



            <Dragger {...props}>

                <p className="ant-upload-drag-icon">

                <Icon type="inbox" />

                </p>

                <p className="ant-upload-text">点击或者拖动视频文件到这里</p>

            </Dragger>,

        </div>

    )

}

}

This is the picture I gave the error.

I am sorry, I just learned to use StackOverflow. If my description is not clear, please let me know, this question has been annoying me for a long time, thank you.