绕过网关访问图片上传并解决跨域问题
繞過網(wǎng)關(guān)
圖片上傳是文件的傳輸,如果也經(jīng)過Zuul網(wǎng)關(guān)的代理,文件就會(huì)經(jīng)過多次網(wǎng)路傳輸,造成不必要的網(wǎng)絡(luò)負(fù)擔(dān)。在高并發(fā)時(shí),可能導(dǎo)致網(wǎng)絡(luò)阻塞,Zuul網(wǎng)關(guān)不可用。這樣我們的整個(gè)系統(tǒng)就癱瘓了。
所以,我們上傳文件的請(qǐng)求就不經(jīng)過網(wǎng)關(guān)來處理了。
Zuul的路由過濾
Zuul中提供了一個(gè)ignored-patterns屬性,用來忽略不希望路由的URL路徑,示例:
zuul.ignored-patterns: /upload/**路徑過濾會(huì)對(duì)一切微服務(wù)進(jìn)行判定。
Zuul還提供了ignored-services屬性,進(jìn)行服務(wù)過濾:
zuul.ignored-services: upload-servie我們這里采用忽略服務(wù):
zuul:ignored-services:- upload-service # 忽略u(píng)pload-service服務(wù)上面的配置采用了集合語法,代表可以配置多個(gè)。
?
Nginx的rewrite指令
現(xiàn)在,我們修改頁面的訪問路徑:
<v-uploadv-model="brand.image" url="/upload/image" :multiple="false" :pic-width="250" :pic-height="90"/>查看頁面的請(qǐng)求路徑:
可以看到這個(gè)地址不對(duì),依然是去找Zuul網(wǎng)關(guān),因?yàn)槲覀兊南到y(tǒng)全局配置了URL地址。怎么辦?
有同學(xué)會(huì)想:修改頁面請(qǐng)求地址不就好了。
注意:原則上,我們是不能把除了網(wǎng)關(guān)以外的服務(wù)對(duì)外暴露的,不安全。
?
既然不能修改頁面請(qǐng)求,那么就只能在Nginx反向代理上做文章了。
我們修改nginx配置,將以/api/upload開頭的請(qǐng)求攔截下來,轉(zhuǎn)交到真實(shí)的服務(wù)地址:
location /api/upload {proxy_pass http://127.0.0.1:8082;proxy_connect_timeout 600;proxy_read_timeout 600; }這樣寫大家覺得對(duì)不對(duì)呢?
?
顯然是不對(duì)的,因?yàn)閕p和端口雖然對(duì)了,但是路徑?jīng)]變,依然是:http://127.0.0.1:8002/api/upload/image
前面多了一個(gè)/api
?
Nginx提供了rewrite指令,用于對(duì)地址進(jìn)行重寫,語法規(guī)則:
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,而下面一個(gè)映射路徑是 / ,根據(jù)最長路徑匹配原則,/api/upload優(yōu)先級(jí)更高。也就是說,凡是以/api/upload開頭的路徑,都會(huì)被第一個(gè)配置處理
-
proxy_pass:反向代理,這次我們代理到8082端口,也就是upload-service服務(wù)
-
rewrite "^/api/(.*)$" /$1 break,路徑重寫:
-
"^/api/(.*)$":匹配路徑的正則表達(dá)式,用了分組語法,把/api/以后的所有部分當(dāng)做1組
-
/$1:重寫的目標(biāo)路徑,這里用$1引用前面正則表達(dá)式匹配到的分組(組編號(hào)從1開始),即/api/后面的所有。這樣新的路徑就是除去/api/以外的所有,就達(dá)到了去除/api前綴的目的
-
break:指令,常用的有2個(gè),分別是:last、break
-
last:重寫路徑結(jié)束后,將得到的路徑重新進(jìn)行一次路徑匹配
-
break:重寫路徑結(jié)束后,不再重新匹配路徑。
我們這里不能選擇last,否則以新的路徑/upload/image來匹配,就不會(huì)被正確的匹配到8082端口了
-
-
修改完成,輸入nginx -s reload命令重新加載配置。然后再次上傳試試。
跨域問題
重啟nginx,再次上傳,發(fā)現(xiàn)跟上次的狀態(tài)碼已經(jīng)不一樣了,但是依然報(bào)錯(cuò):
不過慶幸的是,這個(gè)錯(cuò)誤已經(jīng)不是第一次見了,跨域問題。
我們在upload-service中添加一個(gè)CorsFilter即可:
@Configuration public class CorsConfiguration {@Beanpublic CorsFilter corsFilter() {//1.添加CORS配置信息CorsConfiguration config = new CorsConfiguration();//1) 允許的域,不要寫*,否則cookie就無法使用了config.addAllowedOrigin("http://manage.learn.com");//3) 允許的請(qǐng)求方式config.addAllowedMethod("OPTIONS");config.addAllowedMethod("POST");// 4)允許的頭信息config.addAllowedHeader("*");//2.添加映射路徑,我們攔截一切請(qǐng)求UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();configSource.registerCorsConfiguration("/**", config);//3.返回新的CorsFilter.return new CorsFilter(configSource);} }?
總結(jié)
以上是生活随笔為你收集整理的绕过网关访问图片上传并解决跨域问题的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 文件上传代码逻辑
- 下一篇: FastDFS的安装