Comments (19)
推荐的用法
个人理解图片上传的官方推荐应该是组合 requestType 和 data:
requestType: 'form'
data: formData,
请求头的content-type应该为 multipart/form-data
, 如果是 application/x-www-form-urlencoded
说明自己写法不对,@Clago 的用法即可解决。尝试自己指定 multipart/form-data
会因为没有 boundary 而报错。
兼容性问题
另外一种情况是采用了标准用法也会识别为错误的content-type。问题原因是:在iOS下的某些浏览器内核(比如钉钉),会将FormData对象识别为Object,从而导致content-type也会被识别为 application/x-www-form-urlencoded
。
下面是源码的截图,不难理解:
- data应该被是识别为 FormData,从而进入 绿色 case的逻辑;
- data 被识别为了 Object,结合
requestType :'form'
的设定,进入了 红色 case的逻辑,从而导致了兼容性问题,无法上传
解决办法
requestType + data 最后会被转化成 body 和 content-type,content-type的判定逻辑会有漏洞,如果前端只传递 body 即可绕过这个有问题的检测,将content-type的判定交给浏览去做。
export async function fileUpload(file: File) {
const formData = new FormData();
formData.append('file', file, file.name);
return request<API.Result<SYSTEM.FileType>>(`/app/images/upload`, {
method: 'POST',
body: formData,
});
}
axios的做法
umi-request 和 axios 识别 FormData 的方法都是都是Object.toString 来判定字符串。
如果识别为 FormData 类型,就删除用户传递的 content-type,交给浏览器自己识别;不能识别FormData,如果也传递了content-type的话,也会有兼容性问题,最好就是不代码传 content-type。
from umi-request.
没有 我修正了请求头 也有这个问题
这个是上传文件样例,request.post(/api/res/file
,{requestType: 'form',data:parameter})。
原因就是全局里别指定header,单独的api也不要指定header。data为formData类型的话,就会自动加上boundary了。
from umi-request.
我也有这个问题,没有设置请求头,也不对。
from umi-request.
解决了吗,看文档说formdata会自动转换,根本就没有,坑啊。@wentools
from umi-request.
原因找到了,request.js里extend别指定全局头信息,我指定了application/x-www-form-urlencoded。
from umi-request.
request('/api/file/fileController/fileUpload', {
method: 'POST',
data: formData,
headers: {
// Authorization: localStorage.getItem('token')!,
// 'Content-Type': 'multipart/form-data;',’application/x-www-form-urlencoded; charset=utf-8‘
},
});
from umi-request.
没有 我修正了请求头 也有这个问题
from umi-request.
没有 我修正了请求头 也有这个问题
不要在reques.js里全局设置header,自己写的api里表单提交用加上参数requestType:'form'.
request(`/api/xxx`, {
method: 'post',
requestType: 'form',
data: params,
})
之前不知道这个参数,设置了全局头application/x-www-form-urlencoded,再用qs转,走了弯路。
from umi-request.
原因就是全局里别指定header,单独的api也不要指定header。data为formData类型的话,就会自动加上boundary了。
这个解释是对的。但是和 requestType: 'form',
是无关的
from umi-request.
我也有这个问题,没有设置请求头,也不对。
from umi-request.
妈啊,真是找好久,终于解决了
from umi-request.
太难了,就是全局设置headers的问题,我看到这个issure后注释了全局header就好了。太坑了,debug了一下午
from umi-request.
'Content-Type': false也不起作用,就是覆盖不了,后端一直500还扯皮、、、重新new一个不加content-type的请求实例就好了
希望有缘人能看到 解决办法:https://blog.csdn.net/qq_44472722/article/details/117417101
from umi-request.
指定requestType: "form"
就行,不用再指定请求头"Content-Type: multipart/form-data"
,否则后端就是会一直500;文档 https://github.com/umijs/umi-request/blob/master/README_zh-CN.md#%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0 需要补充一下
from umi-request.
对需要指定 requestType: "form"即可 ,如果全局指定了 content-type 也需要去掉,会自动添加对应的
from umi-request.
太难了,就是全局设置headers的问题,我看到这个issure后注释了全局header就好了。太坑了,debug了一下午
我直接把header删掉了也不行,最后请求自动带上的请求头不是aplication/json就是其他请求头,偏偏不是multipart/form-data
from umi-request.
推荐的用法
个人理解图片上传的官方推荐应该是组合 requestType 和 data:
requestType: 'form' data: formData,
请求头的content-type应该为
multipart/form-data
, 如果是application/x-www-form-urlencoded
说明自己写法不对,@Clago 的用法即可解决。尝试自己指定multipart/form-data
会因为没有 boundary 而报错。兼容性问题
另外一种情况是采用了标准用法也会识别为错误的content-type。问题原因是:在iOS下的某些浏览器内核(比如钉钉),会将FormData对象识别为Object,从而导致content-type也会被识别为
application/x-www-form-urlencoded
。下面是源码的截图,不难理解:
- data应该被是识别为 FormData,从而进入 绿色 case的逻辑;
- data 被识别为了 Object,结合
requestType :'form'
的设定,进入了 红色 case的逻辑,从而导致了兼容性问题,无法上传解决办法
requestType + data 最后会被转化成 body 和 content-type,content-type的判定逻辑会有漏洞,如果前端只传递 body 即可绕过这个有问题的检测,将content-type的判定交给浏览去做。
export async function fileUpload(file: File) { const formData = new FormData(); formData.append('file', file, file.name); return request<API.Result<SYSTEM.FileType>>(`/app/images/upload`, { method: 'POST', body: formData, }); }
axios的做法
umi-request 和 axios 识别 FormData 的方法都是都是Object.toString 来判定字符串。
如果识别为 FormData 类型,就删除用户传递的 content-type,交给浏览器自己识别;不能识别FormData,如果也传递了content-type的话,也会有兼容性问题,最好就是不代码传 content-type。
兼容性问题也请仔细读读,body的这个解决了我的问题
from umi-request.
from umi-request.
from umi-request.
Related Issues (20)
- 能否实现像useRequest一样的对于同一个请求 请求多次默认只保留最后的请求结果
- Request 搞那么麻烦干嘛?简化呢?
- 好好的axios让你们封装成了依托答辩,真的是服了 HOT 1
- 请求成功还是触发了timeout
- stream类型支持吗 HOT 1
- 用在小程序上可以吗 HOT 5
- 1
- 1
- How to use RequestConfig based on @umijs/max to make the front end insensitive to refresh tokens
- 使用vite,在修改页面后,接口出现errorHandler.ts:37 TypeError: response.clone is not a function的报错,但是刷新一下页面报错就没了,请问是什么原因
- 引用链接失效
- 我试图在RequestConfig中修改headers的Content-Type,可这样始终无法生效 HOT 1
- 不使用umi全家桶单独使用umi-request 如何使用mock.js 拦截请求? HOT 1
- 请求设置 requestType: 'form' 无效 HOT 1
- umi-request在next.js中可以使用吗?
- 请求时怎么配置忽略SSL校验 HOT 1
- Can 'GET' use with data ?
- umijs 的request怎么监听响应码302 重定向的状态呢?
- 项目爆了
- 突然无法使用
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from umi-request.