Table des matières
téléchargement traitement retour
2. S'il y a une demande d'interception (il suffit de la renvoyer directement)
Response.text() obtient les données textuelles de la réponse en tant qu'objet Promise
recevoir et publier des demandes
Opération d'effet secondaire, opération d'obtention/affichage d'informations
CORS (Cross-Origin Resource Sharing) partage de ressources multi-origines
Demande simple Demande simple (pas de contrôle en amont)
Lorsque le serveur ne définit pas de domaine croisé, json peut être déguisé en texte/plain
télécharger
submitAddFile(){
var formData = new FormData();
formData.append('num', this.addType);
formData.append('linkId',this.addId);
formData.append('rfilename',this.addFileName);
for(var i=0;i<this.addArr.length;i++){
formData.append('fileUpload',this.addArr[i]);
}
let config = {
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': this.token
}
};
this.axios.post(apidate.uploadEnclosure,formData,config)
.then((response) => {
if(response.data.info=="success"){this.$message({
type: 'success',
message: '附件上传成功!'
});
}
})
}
Vue réalise la méthode de chargement et de téléchargement de fichiers - Nuggets
télécharger
obtenir
//静态a标签
<a :href='"/user/downloadExcel"' >下载模板</a>
//动态创建a标签：
<div name="downloadfile" onclick="downloadExcel()">下载</div>
function downloadExcel() {
let a = document.createElement('a')
a.href ="/user/downloadExcel"
a.click();
}
//window
function downloadExcel() {
window.location.href = "/tUserHyRights/downloadUsersUrl";
}
poste
flux objet/fichier
téléchargement traitement retour
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
export const download= (response: { data?: any; config?: AxiosRequestConfig }) => {
console.log("response", response);
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = function () {
try {
console.log("result:", this.result);
const jsonData = JSON.parse((this as any).result); // 成功 说明是普通对象数据
if (jsonData?.code !== 200) {
errorMsgTips(jsonData?.message ?? "请求失败");
reject(jsonData);
}
} catch (err) {
// 解析成对象失败，说明是正常的文件流
// responseType为blob，以便接收二进制数据。
const blob = new Blob([response.data]);
// 本地保存文件
const url = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
const filename = response?.config.headers?.["content-disposition"]
?.split("filename*=")?.[1]
?.substr(7);
link.setAttribute("download", decodeURI(filename));
document.body.appendChild(link);
link.click();
resolve(response.data);
}
};
fileReader.readAsText(response.data);
});
flux de fichiers
axios.post
// Vue组件中的方法
methods: {
downloadFile() {
axios.post('/api/download', { /* 请求参数 */ }, { responseType: 'blob' })
.then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.style.display = 'none'
link.href = url;
const filename = response?.config.headers?.["content-disposition"]
?.split("filename*=")?.[1]
?.substr(7);
link.setAttribute("download", decodeURI(filename));// 指定下载后的文件名，防跳转
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
.catch(error => {
// 处理错误
console.error(error);
});
}
}
Extraire le nom du fichier de l'en-tête de la réponse : Content-DispositionLa valeur du champ de l'en-tête de la réponse a une forme similaire à celle filename*=UTF-8''example-file.txt, et le nom du fichier est extrait example-file.txt.
Paquet axios
Le backend renvoie directement le flux de fichier , ouvre et télécharge le fichier en tant que [object Object], changez simplement res en res.data
1. Demander le type de paramètre responseType : 'blob' (s'il n'est pas défini, le fichier ouvert sera brouillé)
import request from '@/utils/request'
import { AxiosRequestConfig, AxiosResponse } from 'axios'
const baseUrl: string = process.env.NODE_ENV === 'development' ? '/test' : ''
const mock: boolean = false
export const postQuery = (params: string): Promise<AxiosResponse> => {
const url: string = mock ? `${baseUrl}/xxx:8081/otherIndexUpload/${params}` : `${baseUrl}/otherIndexUpload/${params}`
console.log('post: ', url)
return request({ url, method: 'post', responseType: 'blob' })
}
return request({
url: '/data/wos/download',
method: 'post',
data: data,
responseType: 'blob',
timeout: 3000000,
onDownloadProgress: function (progressEvent: ProgressEvent<EventTarget>): void {
// 处理原生进度事件
store.state.percent = ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2)
console.log(`下载进度：${store.state.percent}`)
if (Number(store.state.percent) == 100) {
store.commit('changeProgress')
}
}
})
2. S'il y a une demande d'interception (il suffit de la renvoyer directement)
import service from 'axios'
import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
// 响应拦截器
service.interceptors.response.use(
(response: { data: any; config: AxiosRequestConfig }) => {
const resData = response.data || {}
if (response.config.responseType === 'blob') {
return response
}..
},
(error: AxiosError) => {
...
}
)
export default service
3. télécharger
export const download = (res: AxiosResponse) => {
var blob = new Blob([res.data], {
type: "application/vnd.ms-excel;charset=utf-8",
});
var url = window.URL.createObjectURL(blob);
var aLink = document.createElement("a");
aLink.style.display = "none";
//指定文件名，防止跳转
aLink.download =decodeURIComponent(escape(res?.headers?.["content-disposition"]?.split("filename=")?.[1]))
aLink.href = url;
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
}4. Demander un téléchargement
toDownloadTemplate() {
console.log('下载模板')
API.postQuery(`downloadTemplate/${this.wpReleId}`).then((res: any) => {
if (res.data.type === "application/vnd.ms-excel") {
download(res);
} else {
res.data.text().then((res: any) => {
this.$message.warning(JSON.parse(res).msg)
})
}
})
}base connexe
Response.text() obtient les données textuelles de la réponse en tant qu'objet Promise
Applicable après que le type de réponse soit spécifié dans la requête, mais certains types de contenu de la réponse ne conviennent pas au type de réponse
fetch('https://example.com/api/data')
.then(response => response.text())
.then(textData => {
console.log(textData); // 输出响应的文本数据
})
.catch(error => {
console.error(error);
});
decodeURIComponent()décodage
La fonction décode la chaîne encodée et affiche le contenu normal
escape()codage
La fonction encode la chaîne brouillée pour garantir que les caractères spéciaux (tels que Chinese ) sont encodés conformément à UTF-8.
goutte
Grand objet binaire. Blob est un type de données qui stocke des données binaires, telles que des images, des fichiers audio et vidéo, etc.
MIME
Les extensions de messagerie Internet polyvalentes indiquent la nature et le format des fichiers transférés . Spécifiez une chaîne spécifique dans l'en-tête HTTP ou d'autres protocoles pour identifier le type de fichier.
Le type principal indique la grande catégorie du fichier,
"application" indique le type d'application,
"text" indique le type de texte,
"image" indique le type d'image, etc.
Un sous-type représente un format de fichier spécifique,
"plain" signifie texte brut,
"vnd" signifie type personnalisé
"vnd.ms-excel" : fichier de feuille de calcul Microsoft Excel.
recevoir et publier des demandes
POST : utilisé pour transmettre des informations au serveur, la fonction est similaire à GET, mais il est généralement recommandé d'utiliser POST ;
GET : utilisé pour demander l'accès aux ressources identifiées par l'URI (Uniform Resource Identifier), qui peut être transmis au serveur via l'URL ;
Pour les requêtes GET, le navigateur enverra l'en-tête http et les données ensemble , et le serveur répondra avec 200 (données de retour) ;
Pour POST, le navigateur envoie d'abord l'en-tête , le serveur répond avec 100 continue , le navigateur envoie des données et le serveur répond avec 200 ok (retourne des données).
Dans le cas d'un bon environnement réseau, la différence entre le temps d'envoi d'un paquet et le temps d'envoi de deux paquets peut fondamentalement être ignorée.
Dans le cas d'un environnement réseau médiocre, TCP avec deux paquets présente un grand avantage pour vérifier l'intégrité du paquet de données.
Parce que GET est généralement utilisé pour interroger des informations, POST est généralement utilisé pour soumettre certaines informations pour certaines opérations de modification (informations privées telles que l'enregistrement, la connexion)
Ainsi, GET ne redemandera pas lorsque le navigateur sera restauré et POST soumettra à nouveau la demande.
Étant donné que GET ne redemandera pas lorsque le navigateur sera restauré , POST soumettra à nouveau la demande.
Par conséquent, les requêtes GET seront activement mises en cache par le navigateur , et POST ne le sera pas. Si vous définissez manuellement les paramètres
de requête GET , ils seront entièrement conservés dans l'historique du navigateur et les paramètres de POST ne le seront pas.
Comme les paramètres de la requête GET seront entièrement conservés dans l'historique du navigateur,
les paramètres transmis dans l'URL de la requête GET ont une longueur limite , alors que POST n'a pas de limite
Étant donné que les paramètres GET sont transmis via l'URL , POST est placé dans le corps de la requête
Ainsi, le téléchargement du lien hypertexte est une demande d'obtention
cache
Opération d'effet secondaire, opération d'obtention/affichage d'informations
Les téléchargements de fichiers sont une opération à effet secondaire, et non des requêtes GET régulières pour récupérer des ressources.
Les navigateurs considèrent généralement que la réponse d'un téléchargement de fichier est unique et ne sera pas réutilisée.
Ainsi, même les requêtes get qui seront mises en cache par défaut ne seront pas stockées dans le cache.
Même si un navigateur choisit de stocker le contenu du fichier dans le cache, il le stockera généralement dans un cache temporaire sessionStorage plutôt que dans un cache persistant à long terme
localStorage.
Le fichier renvoyé par la requête est stocké dans le cache du navigateur, puis téléchargé avec href, c'est-à-dire que la requête get est toujours déplacée une fois du cache vers le chemin de destination.
Étant donné que GET ne redemandera pas lorsque le navigateur sera restauré , POST soumettra à nouveau la demande.
Par conséquent, la requête GET sera activement mise en cache par le navigateur , de sorte que les paramètres de la requête GET seront complètement conservés dans l'historique du navigateur si la requête est refaite , et les paramètres du POST ne seront pas
unité max-age : secondes
Étant donné que les requêtes POST ont des effets secondaires (comme la modification de données sur le serveur),
Par conséquent, les navigateurs ne mettent généralement pas en cache les résultats de la réponse POST et définissent manuellement le cache ( Cache-Control, Expires, Last-Modified, Content-Disposition )
Contenu-Disposition
attachment: signifie télécharger le contenu en pièce jointe.inline: Indique d'intégrer le contenu dans la page, généralement utilisé pour afficher directement du contenu non HTML , tel qu'un PDF, une image, etc.form-data: Indique que le contenu de la réponse est une donnée de formulaire, qui est généralement utilisée dans le cas de fichiers de téléchargement de formulaire.
Content-Disposition : pièce jointe ; filename="example.pdf"
attachmentsignifie télécharger le contenu de la réponse en pièce jointe ,
filename="example.pdf"Le nom du fichier lors de l'enregistrement du fichier est spécifié comme "example.pdf"
Les navigateurs peuvent stocker temporairement une partie des données du fichier en mémoire pour traitement lors de l'écriture dans le chemin de destination.
Cependant, cela ne fait pas partie du cache du navigateur, mais plutôt du stockage temporaire pour les transferts de fichiers et les écritures .
CORS (Cross-Origin Resource Sharing) partage de ressources multi-origines
Autoriser les navigateurs à envoyer des requêtes à des serveurs d'origine croiséeXMLHttpRequest , surmontant ainsi la limitation selon laquelle AJAX ne peut être utilisé que sur la même origine
C'est une solution fondamentale pour les requêtes AJAX cross-origin , la solution la plus couramment utilisée
Exiger
Actuellement, tous les navigateurs prennent en charge cette fonction et le navigateur IE ne peut pas être inférieur à IE10
CORS nécessite à la fois la prise en charge du navigateur et du backend. IE 8 et 9 doivent être implémentés via XDomainRequest .
CORS peut être activé en définissant Access-Control-Allow-Origin côté serveur. Cet attribut indique quels noms de domaine peuvent accéder aux ressources, et si un caractère générique est défini, cela signifie que tous les sites Web peuvent accéder aux ressources.
vérification préalable au vol
Une requête en amont signifie qu'avant que le navigateur n'envoie une requête interdomaine, il enverra d'abord une requête OPTIONS pour demander au serveur s'il accepte la requête réelle.
Les demandes de contrôle en amont sont principalement utilisées pour la vérification de la sécurité des demandes complexes, telles que celles contenant des en-têtes de demande personnalisés ou utilisant des champs d'en-tête non simples.
demande de classement
CORS est divisé en requêtes simples, requêtes non simples/complexes
Demande simple Demande simple (pas de contrôle en amont)
Tant que les deux conditions suivantes sont remplies en même temps , il s'agit d'une simple demande
Condition 1 : utilisez l'une des méthodes suivantes :
- OBTENIR
- DIRIGER
- POSTE
Condition 2 : en plus des en-têtes de requête personnalisés autorisés (par exemple : X-PINGOTHER), l'en-tête de requête ne contient que quelques champs d'en-tête simples, tels que : Accept, Accept-Language, Content-Language, Content-Type, Range.
La valeur de Content-Type est limitée à l'une des trois valeurs suivantes :
- texte simple
- multipart/form-data ( données de paire clé-valeur )
- application/x-www-form-urlencoded ( URL encodée) ( par défaut )
La différence entre application/xml, text/xml, text/html et text/plain
1. text/html est le texte au format html
2. text/plain est un texte brut (peut efficacement éviter les vulnérabilités XSS )
3. Text/xml ignore le format d'encodage spécifié par l'en-tête xml et adopte l'encodage us- ascii par défaut
4. application/xml sera encodé selon le format d'encodage spécifié par l'en-tête xml :
Aucun des objets XMLHttpRequestUpload de la requête n'a d' écouteur d'événement enregistré ;
L'objet XMLHttpRequestUpload est accessible à l'aide de la propriété XMLHttpRequest.upload .
GET /cors? HTTP/1.1
Host: localhost:2333
Connection: keep-alive
Origin: http://localhost:2332
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Accept: */*
Referer: http://localhost:2332/CORS.html
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
If-None-Match: W/"1-NWoZK3kTsExUV00Ywo1G5jlUKKs"
Il suffit de définir Access-Control-Allow-Origin côté serveur ( indiquant que les demandes pour ces noms de domaine sont acceptées (* pour tous) )
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8Access-Control-Allow-Methods : spécifie les méthodes HTTP autorisées. Par exemple,
Access-Control-Allow-Methods: GET, POST, PUTindique que les méthodes GET, POST et PUT sont autorisées.Access-Control-Allow-Headers : spécifie les champs d'en-tête HTTP autorisés. Par exemple,
Access-Control-Allow-Headers: Content-Type, Authorizationindique que les champs Content-Type et Authorization sont autorisés.Access-Control-Max-Age : spécifie le temps de mise en cache des demandes de contrôle en amont (requêtes OPTIONS) pour éviter d'envoyer fréquemment des demandes de contrôle en amont.
Access-Control-Allow-Credentials : indique s'il faut autoriser l'envoi d'informations d'identification (telles que des cookies) au domaine cible. S'il est défini sur true, cela signifie que l'envoi est autorisé.
Access-Control-Expose-Headers est un champ d'en-tête de réponse CORS (Cross-Origin Resource Sharing) utilisé pour spécifier des champs d'en-tête de réponse supplémentaires qui sont accessibles dans les demandes cross-origin.
Access-Control-Expose-Headers, le serveur peut spécifier des champs d'en-tête de réponse supplémentaires, qui seront publiés par le navigateur et permettront l'accès au code JavaScript.
Lorsqu'un navigateur lance une requête interdomaine, seuls certains champs d'en-tête de réponse par défaut (tels que Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma) sont accessibles pour des raisons de sécurité. Les autres champs d'en-tête de réponse personnalisés ne sont pas accessibles par défaut.
application
Lorsque le serveur ne définit pas de domaine croisé, json peut être déguisé en texte/plain
principe:
Enveloppé comme une simple demande pour contourner les pré-vérifications. Mais certains clients ou proxys pré-vérifient encore
Sécurité:
Le mécanisme de gestion par défaut du navigateur pour les réponses JSON consiste à les analyser automatiquement en objets JavaScript.
Lorsque le navigateur reçoit la réponse, si le Content-Type de la réponse est application/json ou si aucun Content-Type n'est spécifié , le navigateur analyse automatiquement le corps de la réponse en JSON, les objets JavaScript et des codes malveillants peuvent être exécutés, provoquant la sécurité vulnérabilité ou attaque.
En masquant les réponses JSON en texte/plain, vous pouvez éviter le comportement par défaut du navigateur consistant à analyser automatiquement les réponses en objets JavaScript.
De cette manière, le code JavaScript doit analyser manuellement la réponse pour garantir la sécurité et l'exactitude des données. Ce masquage fournit une couche de sécurité supplémentaire contre d'éventuels risques de sécurité provenant de l'analyse automatique des réponses.
//请求头
GET /example HTTP/1.1
Host: example.com
Accept: text/plain
//响应头
HTTP/1.1 200 OK
Content-Type: text/plain
//响应体
{"foo": "bar"}