Question

我使用create-react-app进行前端操作，并在antd上传文件中使用Dragger组件。我的后端是springboot。我的前端使用提取将请求数据发送到后端，这将导致跨域问题。所以我在create-react-app的package.json文件“ http://localhost:8080”中添加了“代理”来代理我的后端，这解决了跨域的麻烦，但是当我使用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>
    )
}

}

这是我给错误的图片。

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

Answer 1

此错误是谷歌浏览器的安全措施。当您在前端和后端使用2个不同的服务器时，它会出现。安装此库以对其进行修复：

npm安装cors https://www.npmjs.com/package/cors

Antd上传的Dragger组件上传跨域

1 个答案: