Vite React应用无法加载外部URL图片问题求助

问题重现 #

在Vite搭建的React开发环境中，使用如下代码加载外部imgur图片时：

<header class="tweet--header">
  <img class="tweet--avatar" src="https://i.imgur.com/73hZDYK.png" />
  <h2 class="tweet--name">Newton</h2>
  <small class="tweet--handle">@SirIsaac</small>
</header>

浏览器DevTools网络面板显示403 Forbidden错误，但相同代码在create-react-app项目中可正常显示图片，已确认是CORS相关问题。

原因分析 #

Imgur服务器启用了防盗链策略，会校验请求的Referer头。Vite开发服务器默认会在请求中携带当前页面的地址（如http://localhost:5173）作为Referer，而该地址不在Imgur的授权来源列表中，因此被服务器拦截。而create-react-app的开发服务器默认配置会避免携带这类触发防盗链的Referer，所以能正常加载。

解决方案 #

方案1：配置Vite反向代理（推荐） #

通过Vite的代理功能转发imgur图片请求，让请求从Vite服务器发出，避免携带前端页面的Referer头。

修改vite.config.js：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/imgur': {
        target: 'https://i.imgur.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/imgur/, '')
      }
    }
  }
});

然后更新组件中的图片路径：

<img class="tweet--avatar" src="/imgur/73hZDYK.png" />

方案2：设置请求头移除Referer #

修改Vite开发服务器的响应头，让页面发起的请求不再携带Referer信息，绕过Imgur的防盗链校验。

修改vite.config.js：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  server: {
    headers: {
      'Referrer-Policy': 'no-referrer'
    }
  }
});

修改后无需调整组件中的图片路径，直接使用原外部URL即可。

注意事项 #

• 方案1的代理方式更灵活，适合多个外部资源的场景，也能避免其他类似的防盗链问题；
• 方案2的no-referrer策略会影响页面中所有请求的Referer携带，若项目中有依赖Referer的功能（如部分第三方登录、统计），需谨慎使用。

内容的提问来源于stack exchange，提问作者m3.b