Javascript Antd上传';s Dragger组件上载跨域进行

Javascript Antd上传';s Dragger组件上载跨域进行,javascript,antd,Javascript,Antd,我使用CreateReact应用程序来完成我的前端,并使用antd上传中的Dragger组件。我的后端是springboot。我的前端使用fetch将请求数据发送到后端,这将导致跨域问题。因此,我在create react app:”的package.json文件中添加了“proxy”来代理我的后端,解决了跨域的问题,但当我使用antd官网时,上传者的Dragger组件在上传时总是报告错误 这是我使用Antd的Dragger的代码 import React, { Component } from

我使用CreateReact应用程序来完成我的前端,并使用antd上传中的Dragger组件。我的后端是springboot。我的前端使用fetch将请求数据发送到后端,这将导致跨域问题。因此,我在create react app:”的package.json文件中添加了“proxy”来代理我的后端,解决了跨域的问题,但当我使用antd官网时,上传者的Dragger组件在上传时总是报告错误

这是我使用Antd的Dragger的代码

import React, { Component } from 'react';
import { Upload, Icon, message } from 'antd';
import './UpVideo.css';
const Dragger=Upload.Dragger

导出默认类UpVideo扩展组件{

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>
    )
}
render(){
常量道具={
名称:'文件',
多重:假,
标题:{
“访问控制允许来源”:“*”,
“访问控制允许方法”:“POST”,
},
行动:'http://localhost:8080/vidoe/up',
onChange(信息){
//const status=info.file.status;
控制台日志(信息);
//如果(状态!=“正在上载”){
//log(info.file,info.fileList);
//   }
//如果(状态==“完成”){
//message.success(`${info.file.name}文件已成功上载。`);
//}否则如果(状态=='error'){
//message.error(`${info.file.name}文件上载失败。`);
//   }
},
};
返回(

点击或者拖动视频文件到这里

, ) }
}

这是我给出的错误图片。


对不起,我刚学会使用StackOverflow。如果我的描述不清楚,请让我知道,这个问题困扰了我很长时间,谢谢。

这个错误是google chrome的安全措施。当您使用两台不同的服务器作为前端和后端时,会出现此错误。安装此库以修复它:

npm安装cors

此错误是google chrome的安全措施。当您使用两台不同的服务器作为前端和后端时,会出现此错误。安装此库以修复它:

npm安装cors