---
title: vite构建工具开发vue3项目解决接口图片返回403无法显示
description: API接口返回是图片有时候会做防盗链等配置，在开发环境可能无法正常在前端项目中显示。当前文章通过配置vite前端代理来解决开发阶段图片不显示的问题。
author: chaihongjun
category: others
published: 2025-02-06
url: https://chaihongjun.me/others/47.html
---

# vite构建工具开发vue3项目解决接口图片返回403无法显示

API接口返回是图片有时候会做防盗链等配置，在开发环境可能无法正常在前端项目中显示。当前文章通过配置vite前端代理来解决开发阶段图片不显示的问题。以往配置vite代理都是针对数据接口，这里是针对数据接口返回的图片链接，无法在开发阶段正常使用，组件渲染的时候浏览器控制台显示403：

![vite构建工具开发vue3项目解决接口图片返回403无法显示](https://chaihongjun.me/public/uploads/images/20250206/1738806103929446.jpg)

这里已经很明显的告知了，请求被拒绝的原因 ：ks-deny-reason: referer-acl-deny 明确指出，请求因为 Referer 校验失败而被拒绝。可能的原因包括：

1. 请求缺少 Referer 头。

2. Referer 头的值不符合服务器的 ACL 规则（例如，来源域名不在白名单中）。

所以，Vite配置代理请求过程中保证请求头中的Referer和图片的一致就解决这个问题了。
MDBLOCK0
然后在组件中获取代理后的图片：

MDBLOCK1然后再npm run dev ,图片就可以正常的显示了。

---

> 本文首发于 [chaihongjun.me | 柴宏俊 web 技术学习笔记](https://chaihongjun.me/others/47.html)，采用 CC BY-NC-ND 4.0 协议，转载请保留出处与链接。