Axios does not receive the correct blob object after setting responsetype

Time:2020-11-2

Some project export functions are implemented through blob objects, and the code may be similar to the long one

var params={
    XX:xx,
}
this.$axios.get('/XXX/XXX',{
    params: params,
    responseType: 'blob'
}).then(res => {
    console.log(res);
});

The key statement is responsetype. It represents the data type of the server response. Normally, the response body res can be printed out as follows, as shown in Figure 1

Figure 1 correct blob object

However, if the responsetype is set and the normal blob object cannot be obtained, the console will print out the garbled code like the following, as shown in Figure 2:

Figure 2 “abnormal” blob object with garbled code

The downloaded file also prompts for damage, as shown in Figure 3, 4 and 5

Figure 3 is deceptive, and the restoration is also useful

Figure 4 prompt download file error

Figure 5 the file downloaded in garbled format is blank after opening

If postman can be downloaded successfully on the back-end, excluding the backend pot, you should pay attention to whether the mock module is used in the front-end project at this time. mock.js It was originally designed to intercept requests, generate random data, and let the front-end develop independently of the back-end. But turn on node_ Mockjs under modules mock.js The source code is about 8400 lines, as shown in Figure 6. As you can see, this method is used to initialize the response. As long as the project contains this module, the responsetype of the response interception will be changed to ‘. As a result, our original response type: ‘blob’ is invalid, which in turn causes the received binary stream to be garbled.

Figure 6 mock.js Source code initialization response method

At that time, after receiving the garbled code, we searched the front end, the back end, the back end and the front end for a long time, but we didn’t find the problem. I have repeatedly read the relevant configuration of blob objects in the official documents of Axios and webapi. I think that my front-end code certainly has no problem, but the back-end has eliminated its own “suspicion” through postman. Therefore, this pot has to be backed by the front end. At that time, I thought that since it was not the problem of this piece of code, was it because something changed the structure of the response header, it was easy to think of the response interceptor in Axios, but after checking, there was no such code. Then, programming for Baidu, finally found a possibility in the think no forum: mock module will affect the native Ajax request, making the blob type returned by the server become garbled. Attach the original address: https://segmentfault.com/q/1010000014704618/ 。 Suddenly, open the entry file main.js , comment out the relevant code, only two “/ /”, and immediately solve the problem, as shown in Figure 7.

Figure 7 in main.js Comment out the code of introducing mock module

In fact, the idea is correct, but it is easy to think of it as the response interceptor of Axios instance, but I didn’t think it was mock!!

Recommended Today

Go carbon version 1.2.0 has been released to improve and optimize the multi scenario support for orm

Carbon is a lightweight, semantic and developer friendly golang time processing library, which supports chain call, lunar calendar, Gorm, xorm and other mainstream orm If you think it’s good, please give it to a star github:github.com/golang-module/carbon gitee:gitee.com/go-package/carbon Installation and use //Using GitHub Library go get -u github.com/golang-module/carbon import ( “github.com/golang-module/carbon”) //Using gitee Library go get […]