繞過網關

圖片上傳是文件的傳輸，如果也經過Zuul網關的代理，文件就會經過多次網路傳輸，造成不必要的網絡負擔。在高并發時，可能導致網絡阻塞，Zuul網關不可用。這樣我們的整個系統就癱瘓了。

所以，我們上傳文件的請求就不經過網關來處理了。

Zuul的路由過濾

Zuul中提供了一個ignored-patterns屬性，用來忽略不希望路由的URL路徑，示例：

zuul.ignored-patterns: /upload/**

路徑過濾會對一切微服務進行判定。

Zuul還提供了ignored-services屬性，進行服務過濾：

zuul.ignored-services: upload-servie

我們這里采用忽略服務：

zuul:ignored-services:- upload-service # 忽略upload-service服務

上面的配置采用了集合語法，代表可以配置多個。

?

Nginx的rewrite指令

現在，我們修改頁面的訪問路徑：

<v-uploadv-model="brand.image" url="/upload/image" :multiple="false" :pic-width="250" :pic-height="90"/>

查看頁面的請求路徑：

可以看到這個地址不對，依然是去找Zuul網關，因為我們的系統全局配置了URL地址。怎么辦？

有同學會想：修改頁面請求地址不就好了。

注意：原則上，我們是不能把除了網關以外的服務對外暴露的，不安全。

?

既然不能修改頁面請求，那么就只能在Nginx反向代理上做文章了。

我們修改nginx配置，將以/api/upload開頭的請求攔截下來，轉交到真實的服務地址:

location /api/upload {proxy_pass http://127.0.0.1:8082;proxy_connect_timeout 600;proxy_read_timeout 600; }

這樣寫大家覺得對不對呢？

?

顯然是不對的，因為ip和端口雖然對了，但是路徑沒變，依然是：http://127.0.0.1:8002/api/upload/image

前面多了一個/api

?

Nginx提供了rewrite指令，用于對地址進行重寫，語法規則：

rewrite "用來匹配路徑的正則" 重寫后的路徑 [指令];

我們的案例：

server {listen 80;server_name api.learn.com;proxy_set_header X-Forwarded-Host $host;proxy_set_header X-Forwarded-Server $host;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;# 上傳路徑的映射location /api/upload { proxy_pass http://127.0.0.1:8082;proxy_connect_timeout 600;proxy_read_timeout 600;rewrite "^/api/(.*)$" /$1 break; }location / {proxy_pass http://127.0.0.1:10010;proxy_connect_timeout 600;proxy_read_timeout 600;}}

• 首先，我們映射路徑是/api/upload，而下面一個映射路徑是 / ，根據最長路徑匹配原則，/api/upload優先級更高。也就是說，凡是以/api/upload開頭的路徑，都會被第一個配置處理

• proxy_pass：反向代理，這次我們代理到8082端口，也就是upload-service服務

• rewrite "^/api/(.*)$" /$1 break，路徑重寫：

  • "^/api/(.*)$"：匹配路徑的正則表達式，用了分組語法，把/api/以后的所有部分當做1組

  • /$1：重寫的目標路徑，這里用$1引用前面正則表達式匹配到的分組（組編號從1開始），即/api/后面的所有。這樣新的路徑就是除去/api/以外的所有，就達到了去除/api前綴的目的

  • break：指令，常用的有2個，分別是：last、break

    • last：重寫路徑結束后，將得到的路徑重新進行一次路徑匹配

    • break：重寫路徑結束后，不再重新匹配路徑。

    我們這里不能選擇last，否則以新的路徑/upload/image來匹配，就不會被正確的匹配到8082端口了

修改完成，輸入nginx -s reload命令重新加載配置。然后再次上傳試試。

跨域問題

重啟nginx，再次上傳，發現跟上次的狀態碼已經不一樣了，但是依然報錯：

不過慶幸的是，這個錯誤已經不是第一次見了，跨域問題。

我們在upload-service中添加一個CorsFilter即可：

@Configuration public class CorsConfiguration {@Beanpublic CorsFilter corsFilter() {//1.添加CORS配置信息CorsConfiguration config = new CorsConfiguration();//1) 允許的域,不要寫*，否則cookie就無法使用了config.addAllowedOrigin("http://manage.learn.com");//3) 允許的請求方式config.addAllowedMethod("OPTIONS");config.addAllowedMethod("POST");// 4）允許的頭信息config.addAllowedHeader("*");//2.添加映射路徑，我們攔截一切請求UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();configSource.registerCorsConfiguration("/**", config);//3.返回新的CorsFilter.return new CorsFilter(configSource);} }

?

總結

以上是生活随笔為你收集整理的绕过网关访问图片上传并解决跨域问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。