Antd 请求中的 CORS 问题未通过 CORS 但 fetch() 确实通过答案

【问题标题】：CORS issue in Antd request not passing CORS but fetch() does PASSAntd 请求中的 CORS 问题未通过 CORS 但 fetch() 确实通过
【发布时间】：2021-01-01 14:25:33
【问题描述】：

在将 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

如果您需要任何进一步的信息，请告诉我。

提前致谢。

【问题讨论】：

标签： reactjs fetch antd hapi

【解决方案1】：

克服 CORS 的快速方法是从您的后端。
安装第三方包CORS，然后在你的服务器索引文件（主要是App.js被很多人使用）的最上面请求这个包，并将其用作中间件。

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

然后尝试提出请求。

【讨论】：

其实上面的代码使用了Hapi.js作为服务器，并且CORS是内置在包中的。现在，我无法表达，所以我必须用 Hapi.js 解决一些问题