Tabla de contenido
2. Si hay una solicitud para interceptar (simplemente devuélvala directamente)
Response.text() obtiene los datos de texto de la respuesta como un objeto Promise
decodificarURIComponent() decodificar
obtener y publicar solicitudes
Operación de efectos secundarios, operación de obtener/mostrar información
CORS (intercambio de recursos de origen cruzado) intercambio de recursos de origen cruzado
Solicitud simple Solicitud simple (sin verificación previa)
Cuando el servidor no configura dominios cruzados, json puede disfrazarse como texto/simple
subir
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 se da cuenta del método de carga y descarga de archivos - Nuggets
descargar
conseguir
//静态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";
}
correo
flujo de objeto/archivo
descargar tramitar devolución
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);
});
flujo de archivos
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);
});
}
}
Extraiga el nombre del archivo del encabezado de la respuesta: Content-Dispositionel valor del campo del encabezado de la respuesta tiene una forma similar a esa filename*=UTF-8''example-file.txt, y se extrae el nombre del archivo example-file.txt.
Paquete axios
El backend devuelve directamente la secuencia del archivo , abre y descarga el archivo como [objeto Objeto], simplemente cambia res a res.data
1. Tipo de configuración de solicitud tipo de respuesta: 'blob' (si no se configura, el archivo abierto se distorsionará)
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. Si hay una solicitud para interceptar (simplemente devuélvala directamente)
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.descargar
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. Solicita una descarga
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 relacionada
Response.text() obtiene los datos de texto de la respuesta como un objeto Promise
Aplicable después de que se especifica el tipo de respuesta en la solicitud, pero algún tipo de contenido de la respuesta no es adecuado para el tipo de respuesta
fetch('https://example.com/api/data')
.then(response => response.text())
.then(textData => {
console.log(textData); // 输出响应的文本数据
})
.catch(error => {
console.error(error);
});
decodeURIComponent()descodificación
La función decodifica la cadena codificada y muestra el contenido normal
escape()codificación
La función codifica la cadena distorsionada para garantizar que los caracteres especiales (como el chino ) se codifiquen de acuerdo con UTF-8.
gota
Objeto grande binario. Blob es un tipo de datos que almacena datos binarios, como imágenes, archivos de audio y video, etc.
MÍMICA
Las extensiones de correo de Internet multipropósito indican la naturaleza y el formato de los archivos transferidos . Especifique una cadena específica en el encabezado HTTP u otros protocolos para identificar el tipo de archivo.
El tipo principal indica la categoría grande del archivo,
"aplicación" indica el tipo de aplicación,
"texto" indica el tipo de texto,
"imagen" indica el tipo de imagen, etc.
Un subtipo representa un formato de archivo específico,
"sin formato" significa texto sin formato,
"vnd" significa tipo personalizado
"vnd.ms-excel": archivo de hoja de cálculo de Microsoft Excel.
obtener y publicar solicitudes
POST: se utiliza para transmitir información al servidor, la función es similar a GET, pero generalmente se recomienda usar POST;
GET: Se utiliza para solicitar acceso a los recursos identificados por URI (Uniform Resource Identifier), que se pueden pasar al servidor a través de la URL;
Para solicitudes GET, el navegador enviará el encabezado HTTP y los datos juntos , y el servidor responderá con 200 (datos de retorno);
Para POST, el navegador envía primero el encabezado , el servidor responde con 100 continuar , el navegador envía datos y el servidor responde con 200 ok (devolver datos).
En el caso de un buen entorno de red, la diferencia entre el tiempo para enviar un paquete y el tiempo para enviar dos paquetes básicamente puede ignorarse.
En el caso de un entorno de red deficiente, TCP con dos paquetes tiene una gran ventaja para verificar la integridad del paquete de datos.
Debido a que GET generalmente se usa para consultar información, POST generalmente se usa para enviar cierta información para ciertas operaciones de modificación (información privada como registro, inicio de sesión)
Entonces GET no volverá a solicitar cuando el navegador retroceda , y POST enviará la solicitud nuevamente
Debido a que GET no volverá a solicitar cuando el navegador retroceda , POST volverá a enviar la solicitud
Por lo tanto, el navegador almacenará activamente en caché las solicitudes GET y POST no. Si configura manualmente los parámetros
de solicitud GET , se conservarán por completo en el historial del navegador y los parámetros en POST no se guardarán.
Debido a que los parámetros de la solicitud GET se conservarán por completo en el historial del navegador,
los parámetros transmitidos en la URL de la solicitud GET tienen un límite de longitud , mientras que POST no tiene límite.
Debido a que los parámetros GET se pasan a través de la URL , POST se coloca en el cuerpo de la solicitud
Entonces, la descarga del hipervínculo es una solicitud de obtención
cache
Operación de efectos secundarios, operación de obtener/mostrar información
Las descargas de archivos son una operación secundaria, no solicitudes GET regulares para obtener recursos.
Los navegadores generalmente consideran que la respuesta de la descarga de un archivo es única y no se reutilizará.
Por lo tanto, incluso las solicitudes de obtención que se almacenarán en caché de forma predeterminada no se almacenarán en el caché.
Incluso si un navegador elige almacenar el contenido del archivo en el caché, generalmente lo almacenará en una sesión de almacenamiento de caché temporal en lugar de un caché persistente a largo plazo
localStorage.
El archivo devuelto por la solicitud se almacena en la memoria caché del navegador y luego se descarga con href, es decir, la solicitud de obtención siempre se mueve una vez desde la memoria caché a la ruta de destino.
Debido a que GET no volverá a solicitar cuando el navegador retroceda , POST volverá a enviar la solicitud
Por lo tanto, la solicitud GET será almacenada activamente en caché por el navegador , de modo que los parámetros de la solicitud GET se conservarán por completo en el historial del navegador si la solicitud se realiza nuevamente , y los parámetros en POST no
unidad de edad máxima: segundos
Debido a que las solicitudes POST tienen efectos secundarios (como la modificación de datos en el servidor),
Por lo tanto, los navegadores generalmente no almacenan en caché los resultados de la respuesta POST y configuran manualmente el caché ( Cache-Control, Expires, Last-Modified, Content-Disposition )
Disposición de contenido
attachment: significa descargar el contenido como archivo adjunto.inline: indica que se incruste el contenido en la página, generalmente se usa para mostrar directamente contenido que no es HTML , como PDF, imágenes, etc.form-data: Indica que el contenido de la respuesta es un dato de formulario, que normalmente se utiliza en el caso de archivos de carga de formularios.
Disposición de contenido: archivo adjunto; filename="example.pdf"
attachmentsignifica descargar el contenido de la respuesta como un archivo adjunto ,
filename="example.pdf"El nombre del archivo al guardar el archivo se especifica como "ejemplo.pdf"
Los navegadores pueden almacenar temporalmente una parte de los datos del archivo en la memoria para su procesamiento al escribir en la ruta de destino.
Sin embargo, esto no es parte del caché del navegador, sino un almacenamiento temporal para transferencias y escrituras de archivos .
CORS (intercambio de recursos de origen cruzado) intercambio de recursos de origen cruzado
Permita que los navegadores envíen solicitudes a servidores de origen cruzadoXMLHttpRequest , superando así la limitación de que AJAX solo se puede usar en el mismo origen
Es una solución fundamental para las solicitudes AJAX de origen cruzado , la solución más utilizada
Requerir
Actualmente, todos los navegadores admiten esta función y el navegador IE no puede ser inferior a IE10
CORS requiere compatibilidad tanto con el navegador como con el servidor. IE 8 y 9 deben implementarse a través de XDomainRequest .
CORS se puede habilitar configurando Access-Control-Allow-Origin en el lado del servidor. Este atributo indica qué nombres de dominio pueden acceder a los recursos y, si se establece un comodín, significa que todos los sitios web pueden acceder a los recursos.
verificación previa al vuelo
Una solicitud de verificación previa significa que antes de que el navegador envíe una solicitud entre dominios, primero enviará una solicitud de OPCIONES para preguntarle al servidor si acepta la solicitud real.
Las solicitudes de verificación previa se utilizan principalmente para la verificación de seguridad de solicitudes complejas, como aquellas que contienen encabezados de solicitud personalizados o que usan campos de encabezado no simples.
solicitar clasificación
CORS se divide en solicitudes simples, solicitudes no simples/complejas
Solicitud simple Solicitud simple (sin verificación previa)
Siempre que se cumplan las dos condiciones siguientes al mismo tiempo , es una solicitud simple
Condición 1: Use uno de los siguientes métodos:
- CONSEGUIR
- CABEZA
- CORREO
Condición 2: además de los encabezados de solicitud personalizados permitidos (por ejemplo: X-PINGOTHER), el encabezado de la solicitud solo contiene algunos campos de encabezado simples, como: Aceptar, Aceptar idioma, Contenido-Idioma, Tipo de contenido, Rango.
El valor de Content-Type está limitado a uno de los tres siguientes:
- Texto sin formato
- multipart/form-data ( datos de par clave-valor )
- application/x-www-form-urlencoded ( codificado en URL ) ( predeterminado )
La diferencia entre aplicación/xml, texto/xml, texto/html y texto/simple
1. text/html es el texto en formato html
2. texto/sin formato es un texto sin formato (puede evitar efectivamente las vulnerabilidades XSS )
3. Text/xml ignora el formato de codificación especificado por el encabezado xml y adopta la codificación us- ascii de forma predeterminada
4. application/xml se codificará según el formato de codificación especificado por el encabezado xml:
Ninguno de los objetos XMLHttpRequestUpload de la solicitud tiene detectores de eventos registrados ;
Se puede acceder al objeto XMLHttpRequestUpload mediante la propiedad 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"
Solo necesita configurar Access-Control-Allow-Origin en el lado del servidor (lo que indica que se aceptan las solicitudes de esos nombres de dominio (* para todos) )
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: especifica los métodos HTTP permitidos. Por ejemplo,
Access-Control-Allow-Methods: GET, POST, PUTindica que se permiten los métodos GET, POST y PUT.Access-Control-Allow-Headers: especifica los campos de encabezado HTTP permitidos. Por ejemplo,
Access-Control-Allow-Headers: Content-Type, Authorizationindica que los campos Tipo de contenido y Autorización están permitidos.Access-Control-Max-Age: especifica el tiempo de caché de las solicitudes de verificación previa (solicitudes de OPCIONES) para evitar enviar solicitudes de verificación previa con frecuencia.
Access-Control-Allow-Credentials: indica si se permite el envío de credenciales (como cookies) al dominio de destino. Si se establece en verdadero, significa que se permite el envío.
Access-Control-Expose-Headers es un campo de encabezado de respuesta CORS (Cross-Origin Resource Sharing) que se usa para especificar campos de encabezado de respuesta adicionales a los que se puede acceder en solicitudes de origen cruzado.
Access-Control-Expose-Headers, el servidor puede especificar campos de encabezado de respuesta adicionales, que serán liberados por el navegador y permitirán el acceso del código JavaScript.
Cuando un navegador inicia una solicitud entre dominios, solo se puede acceder a algunos campos de encabezado de respuesta predeterminados (como Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma) por razones de seguridad. No se puede acceder de forma predeterminada a otros campos de encabezado de respuesta personalizados.
solicitud
Cuando el servidor no configura dominios cruzados, json puede disfrazarse como texto/simple
principio:
Envuelto como una solicitud simple para omitir las comprobaciones previas. Pero algunos clientes o proxies aún verifican previamente
Seguridad:
El mecanismo de manejo predeterminado del navegador para las respuestas JSON es analizarlas automáticamente en objetos JavaScript.
Cuando el navegador recibe la respuesta, si el tipo de contenido de la respuesta es aplicación/json o no se especifica ningún tipo de contenido , el navegador analizará automáticamente el cuerpo de la respuesta en JSON, objetos de JavaScript y se pueden ejecutar códigos maliciosos , lo que genera problemas de seguridad. vulnerabilidad o ataque.
Al enmascarar las respuestas JSON como texto/sin formato, puede evitar el comportamiento predeterminado del navegador de analizar automáticamente las respuestas en objetos JavaScript.
De esta forma, el código JavaScript necesita analizar manualmente la respuesta para garantizar la seguridad y corrección de los datos. Este enmascaramiento proporciona una capa adicional de seguridad contra posibles riesgos de seguridad del análisis automático de respuestas.
//请求头
GET /example HTTP/1.1
Host: example.com
Accept: text/plain
//响应头
HTTP/1.1 200 OK
Content-Type: text/plain
//响应体
{"foo": "bar"}Intercambio de recursos de origen cruzado (CORS) - HTTP | MDN
Intercambio de recursos de origen cruzado (CORS) - HTTP | MDN