如何解决Antd 请求中的 CORS 问题未通过 CORS 但 fetch() 执行 PASS
我在将 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())
然后尝试提出请求。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。