---
title: vue3开发的网站部署在nginx上配置代理解决图片跨域问题
description: 之前的文章介绍的nginx配置代理主要是针对API接口，这篇文章解决的是图片跨域问题
author: chaihongjun
category: operations
published: 2025-02-12
url: https://chaihongjun.me/operations/49.html
---

# vue3开发的网站部署在nginx上配置代理解决图片跨域问题

之前的文章《[vue3项目生产环境代理方式解决无法配置接口服务器或请求第三方API的cors跨域问题](https://chaihongjun.me/operations/42.html)》介绍的nginx配置代理主要是针对API接口，这篇文章解决的是图片跨域问题。图片也是从API接口获得，然后在Vue组件内使用。
MDBLOCK0
组件内使用方法getProxyUmageUrl处理图片访问方式：

MDBLOCK1
经过getProxyUmageUrl方法处理，图片链接类似/proxy-image/comic/2019/03/01/d05e65e1709e488ec8c18b02aabfda75.jpg,再加上网站域名，最后图片完整链接是https://haokan.chaihongjun.me/proxy-image/comic/2019/03/01/d05e65e1709e488ec8c18b02aabfda75.jpg。真实目标图片地址是http://ksyuncomic.9comic.cn/comic/2019/03/01/d05e65e1709e488ec8c18b02aabfda75.jpg。那么就需要在nginx上做对应的代理转发配置：
MDBLOCK2
注意图片代理和API代理那里的区别，图片代理使用^~提升匹配等级，如果只是 location  /proxy-image 可能无法进入匹配模式

---

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