Nginx解决代理冲突问题图片访问不出来的问题

     


      同一台服务器 多个不同项目


       location / {

            proxy_redirect off;
            proxy_pass    http://172.16.20.118:8080/;
            proxy_set_header Host      $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }



        location /community {
                proxy_redirect off;
                proxy_pass  http://172.16.20.118:8090/community;
                proxy_set_header Host      $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                
        }
        community 项目下的图片显示不出来

        解决思路:

            由于多个代理多个项目所以路径是这样:proxy_pass  http://172.16.20.118:8090/community;

            从新代理路径就可以了

        
        location ~* .(gif|jpg|jpeg)$ {
                proxy_next_upstream http_502 http_504 error timeout invalid_header;  
                proxy_pass http://172.16.20.118:8090;  
                proxy_set_header Host 192.168.0.37;  
                proxy_set_header X-Forwarded-For $remote_addr;  
        }
### 若依前后端分离验证码显示解决方案 对于若依前后端分离项目中的验证码显示问题,可以采取以下措施来确保验证码能够正常加载并展示。 #### 1. 后端配置Easy-Captcha依赖 为了实现图形验证码功能,在Spring Boot项目的`pom.xml`文件中添加Easy-Captcha库的相关Maven依赖[^3]: ```xml <dependency> <groupId>com.github.whvcse</groupId> <artifactId>easy-captcha</artifactId> <version>1.6.2</version> </dependency> ``` 这一步骤是为了引入必要的工具类用于生成图像形式的验证码。 #### 2. 修改后端接口返回格式 当客户端请求获取验证码时,服务器应将验证码图片转换成Base64编码字符串的形式发送给前端。这样做的好处是可以直接嵌入到HTML页面内而必单独处理静态资源路径问题[^2]。 例如可以在控制器方法里加入如下逻辑: ```java import cn.hutool.extra.spring.SpringUtil; // ...其他导入语句... @GetMapping("/captchaImage") @ResponseBody public Map<String, Object> getCaptcha() { EasyCaptcha captcha = new DefaultGifCaptcha(130, 48); String code = captcha.text(); // 将验证码存入Redis缓存以便后续验证使用 RedisTemplate redisTemplate = SpringUtil.getBean(RedisTemplate.class); redisTemplate.opsForValue().set("loginCode", code.toLowerCase(), 5L, TimeUnit.MINUTES); try (ByteArrayOutputStream outputStream = new ByteArrayOutputStream()) { captcha.out(outputStream); byte[] bytes = outputStream.toByteArray(); Base64.Encoder encoder = Base64.getEncoder(); String base64Img = "data:image/png;base64," + encoder.encodeToString(bytes); HashMap<String, Object> resultMap = Maps.newHashMapWithExpectedSize(2); resultMap.put("img", base64Img); // 返回base64编码后的图片 resultMap.put("uuid", UUID.randomUUID().toString()); // 可选:为每次请求分配唯一标识符 return resultMap; } catch (IOException e) { throw new RuntimeException(e.getMessage()); } } ``` 这段代码实现了通过HTTP GET方式提供一张新的随机验证码图片,并将其以Base64编码的方式封装进JSON对象一同响应给调用者。 #### 3. 处理跨域资源共享(CORS) 由于采用了前后端分离架构设计模式,因此可能会遇到浏览器同源策略限制的问题。此时可以通过设置允许携带凭证属性(`withCredentials`)以及适当调整服务端的安全策略来解决问题[^4]: 在Vue/React等前端框架下修改axios默认配置: ```javascript import axios from 'axios'; axios.defaults.baseURL = process.env.VUE_APP_BASE_API; axios.defaults.headers.post['Content-Type'] = 'application/json'; axios.defaults.withCredentials = true; // 允许跨域携带Cookie ``` 同时还需要确认Nginx或其他Web服务器已经正确设置了Access-Control-Allow-Origin等相关头部信息,使得同域名下的网页也能合法访问API接口。 #### 4. Nginx反向代理配置优化 考虑到实际生产环境中往往还会借助于Nginx来做负载均衡和静态资源分发等工作,则有必要仔细检查其配置项是否合理有效。特别是针对静态文件(如上传的照片、图标等)可能出现的404错误情况作出针对性改进[^1]。 比如下面是一个简单的location匹配规则片段供参考: ```nginx server { listen 80; server_name localhost; location /api/ { proxy_pass http://backend_server_address/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; add_header Access-Control-Allow-Origin * always; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' always; add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization' always; if ($request_method = 'OPTIONS') { return 204; } # 对于POST PUT DELETE等操作需要开启此选项才能让浏览器带上认证信息(cookie/sessionid) proxy_cookie_path / "/; HttpOnly"; } location ~* \.(jpg|jpeg|png|gif)$ { root html/static/images/; expires max; access_log off; } } ``` 上述配置解决了可能存在的跨域难题,还特别指定了如何高效地服务于各类多媒体素材,从而间接促进了验证码图片的成功渲染。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值