chaihongjun.me

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

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

1. 请求缺少 Referer 头。

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

所以，Vite配置代理请求过程中保证请求头中的Referer和图片的一致就解决这个问题了。

  server: {
    proxy: {
      // 匹配图片请求的路径
      '/proxy-image': {
        target: 'https://example.com', // 图片服务器地址
        changeOrigin: true, // 修改请求的 Origin
        rewrite: (path) => path.replace(/^\/proxy-image/, ''), // 路径重写
        headers: {
          Referer: 'https://example.com', // 设置合法的 Referer，和图片服务器地址一致
        },
      },
    },
  },

然后在组件中获取代理后的图片：

<template>
 <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000" v-if="recommend && recommend.length > 0">
   <van-swipe-item v-for="item in recommend" :key="item.did" class="swipe-item">
     <img :src="getProxyImageUrl(item.pic)" />
   </van-swipe-item>
 </van-swipe>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps(['recommend'])
const recommend = computed(() => props.recommend);

// 获取代理后的图片链接
const getProxyImageUrl = (url) => {
 return `/proxy-image${new URL(url).pathname}`; // 只保留路径部分,"/proxy-image" 会被代理到图片服务器地址
};

</script>