Antd 请求中的 CORS 问题未通过 CORS 但 fetch() 执行 PASS

编程问答 2022-06-01

问题描述

我在将 Antd 用于后端 UI 时遇到了奇怪的问题。我正在尝试包含 Antd Upload 以将图像上传到我的 API 服务器。

但由于某种原因，正常的 fetch() 似乎工作正常，而 Antd 内部 fetch 请求显示关于 CORS 丢失的错误。

注意：Hapi API 服务器中的 CORS 处于活动状态

以下是Antd代码

<Upload name="design_images" multiple
    action='http://localhost:4000/files/upload'
    
    beforeUpload={(file)=> {
        var formData = new FormData();
        //append formdata
        formData.append('myfiles',file);
        console.log(file)
        
        //normal fetch request 
        fetch('http://localhost:4000/files/upload',{
            method: 'POST',body: formData,}).then(res => res.json()).then(res => {
            
            //console.log(res)
        });
    }}
    
    onChange={(filesData) => { 
        let fileList = [];
        
        //foreach files in filelist from antd upload
        filesData.fileList.forEach((file) => {
            fileList.push(file.originFileObj); //pushing File object
        });
        
        //set value to formik
        setFieldValue("design_images",fileList);
    }}
>
    <Button icon={<UploadOutlined />}>Click to Upload</Button>
</Upload>

以下是控制台截图

Screenshot the console with XHR request

如果您需要更多信息，请告诉我。

提前致谢。

解决方法

一种快速克服 CORS 的方法是从您的后端。
安装第三方包CORS，然后在你的服务器索引文件的最上层require这个包（大部分是App.js，大量使用），作为中间件使用。

var express = require('express')
var cors = require('cors')
var app = express()
 
app.use(cors())

然后尝试提出请求。

antdantdantdfetchfetchfetchhapireactjsreactjsreactjsreactjs