Tabla de contenido
Escenarios de aplicación
Problema: el front-end escribe la etiqueta img y el atributo src especificados, y no se puede solicitar la imagen del back-end.
Razón: 401, UnauthorizedError, porque el src en el front-end pertenece a una solicitud de obtención normal sin un encabezado personalizado, y el back-end autentica cada solicitud y finalmente regresa
{
status: 1,
msg: "TOKEN ERROR"
}
No se encuentra en el encabezado de la solicitud de interfaz
Authorization: Bearer token....
La interfaz solicitada ha interceptado axios, pero el src de la etiqueta img no pasa esta solicitud
axios.interceptors.request.use(config => {
const passURL = ['/api/login', 'api/register'];
if (passURL.includes(config.url)) return config;
const tk = localStorage.getItem('TOKEN');
if (tk) {
config.headers.Authorization = 'Bearer ' + tk;
} else {
delete config.headers.Authorization;
}
return config;
})
Intenta resolver uno:
CORS se utiliza en segundo plano, lo que permite el dominio cruzado y el transporte de cookies, y el número de puerto del servicio back-end es: 9999
const cors = require('cors');
app.use(cors({
credentials: true}));
Y el backend usa la lista blanca de tokens de análisis al principio
const expJWT = require('express-jwt'); //解析token
// 解析token,unless表示不希望解析的路径
const unPath = ['/api/login','/api/register',/^\/public\/.*/];
app.use(expJWT({
secret: config.jwtKey, algorithms: ['HS256']}).unless({
path: unPath}));
Nota: /^\/public\/.*/
Utilice la coincidencia regular aquí, si escribe directamente en ‘/public/*’el efecto de alcance
en este momento, puede http://localhost:9999/public/images/bg1.jpgacceder directamente a la imagen de fondo, pero esperamos que el extremo de fondo de la imagen no esté completamente abierto , pero también requiera autenticación. Al final, aún debe tomar axios o buscar solicitudes y traer encabezados personalizados a la solicitud.
Intente resolver dos:
Ahora que nos hemos asegurado de que las imágenes sean accesibles, debemos agregar una línea de defensa en la devolución para evitar que otros usuarios no relacionados accedan a ellas de forma aleatoria.
Restablece el src de img. Dado que el acceso directo a src es en última instancia un error, podemos usar el evento onError para restablecer la imagen.
util / axios.js
import axios from 'axios';
axios.interceptors.request.use(config => {
const passURL = ['/api/login', 'api/register'];
if (passURL.includes(config.url)) return config;
const tk = localStorage.getItem('TOKEN');
if (tk) {
config.headers.Authorization = 'Bearer ' + tk;
} else {
delete config.headers.Authorization;
}
return config;
})
axios.interceptors.response.use(response=>{
//....
return response;
})
export default axios;
Escriba un método en util para solicitar imágenes de forma asincrónica
util / utils.js
import axios from './axios';
/**
* 图片拦截请求
* @param url
* @constructor
*/
export async function ImageInterceptor(url) {
// 请求图片，axios是已经实现拦截的,如上面导入,responseType为arraybuffer
let response = await axios(url, {
responseType: 'arraybuffer' });
/**
* 利用data转化图片格式
*/
// response是后台返回二进制流
// btoa表示将字符串转化成编码字符串
// Uint8Array 数组类型表示一个8位无符号整型数组
// reduce方法为Uint8Array.prototype.reduce()，对累加器和数组的每个值应用函数（从左到右），使其归约为单一的值，默认值为''，实现累加
// String.fromCharCode()，将 Unicode 编码转为一个字符:
let res = "data:image/png;base64," + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ""));
return res;
}
showImg.js
import React, {
Component } from 'react';
import {
withRouter } from 'react-router-dom';
import {
connect } from 'react-redux';
import {
bindActionCreators } from 'redux';
import {
actionCreators } from '@store';
import {
ImageInterceptor} from '@utils/util'
class showImage extends Component {
getImage = async (e)=>{
// 获得base64格式的图片
let baseImage = await ImageInterceptor(e.target.src);
e.target.src = baseImage;
}
render() {
return (
<>
{
/* 此处的process.env.REACT_APP_BASE_URL我在.env中设置的是REACT_APP_BASE_URL = http://localhost:9999，对应后端服务，当然也可以手动设置http://localhost:9999/public/images/bg1.jpg */}
<img ref='myimage' src={
`${
process.env.REACT_APP_BASE_URL}/public/images/bg1.jpg`} onError={
this.getImage}></img>
</>
)
}
}
const mapStateToProps = state => {
return {
loginData: state.login
}
}
const mapDispatchToProps = dispatch => {
return {
actionFn: bindActionCreators(actionCreators, dispatch)
}
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(showImage));
Código de núcleo:
// 请求图片
let response = await axios(url, {
responseType: 'arraybuffer' });
let res = "data:image/png;base64,"
+ btoa(new Uint8Array(response.data).reduce((data, byte) =>
data + String.fromCharCode(byte), ""
));
//重置src
getImage = async (e)=>{
// 获得base64格式的图片
let baseImage = await ImageInterceptor(e.target.src);
e.target.src = baseImage;
}
//设置onError事件
<img ref='myimage' src={
`....`} onError={
this.getImage}></img>
Finalmente, la ruta que no necesita resolverse se puede eliminar
const expJWT = require('express-jwt'); //解析token
// 解析token,unless表示不希望解析的路径
const unPath = ['/api/login','/api/register'];
app.use(expJWT({
secret: config.jwtKey, algorithms: ['HS256']}).unless({
path: unPath}));
para resumir:
He estado enredado con este problema durante mucho tiempo, siempre pensando en dónde interceptar la solicitud de red de la imagen, e intenté agregarlo al encabezado del proxy, pero no funcionó en createProxyMiddleware. Puede ser que lo configuré mal y no encontré una solución adecuada, así que la usé. Después del método anterior, no sé si los amigos de front-end tienen otros métodos mejores, bienvenidos a la guía ~