您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“WebApi跨域二次請求及Vue單頁面問題怎么解決”的有關(guān)知識,在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
一、前言
由于項(xiàng)目是前后端分離,api接口與web前端 部署在不同站點(diǎn)當(dāng)中,因此在前文當(dāng)中webapi ajax 跨域請求解決方法(cors實(shí)現(xiàn))使用跨域處理方式處理而不用jsonp的方式。
但是在一段時(shí)間后,發(fā)現(xiàn)一個(gè)很奇怪的問題,每次前端發(fā)起請求的時(shí)候,通過瀏覽器的開發(fā)者工具都能看到在network下同一個(gè)url有兩條請求,第一條請求的method為options,第二條請求的method才是真正的get或者post,并且,第一條請求無數(shù)據(jù)返回,第二條請求才返回正常的數(shù)據(jù)。
二、原因
第一個(gè)options的請求是由web服務(wù)器處理跨域訪問引發(fā)的。options是一種預(yù)檢請求,瀏覽器在處理跨域訪問的請求時(shí),如果判斷請求為復(fù)雜請求,則會(huì)先向服務(wù)器發(fā)送一條預(yù)檢請求,根據(jù)服務(wù)器返回的內(nèi)容,瀏覽器判斷服務(wù)器是否允許訪問該請求。如果web服務(wù)器采用cors的方式支持跨域訪問,在處理復(fù)雜請求時(shí)這個(gè)預(yù)檢請求是不可避免的。
由于我們的web服務(wù)器采用cors來解決跨域訪問的問題,同時(shí)在header中添加了自定義參數(shù)以及使用json格式來進(jìn)行數(shù)據(jù)交互,導(dǎo)致我們的每次請求都是復(fù)雜請求,從而產(chǎn)生每次請求都會(huì)發(fā)送兩條請求的現(xiàn)象。
產(chǎn)生原因如下:
使用cors解決跨域問題
三、解決方案
3.1 nginx
3.1.1 思路
將前端項(xiàng)目部署在nginx當(dāng)中,通過代理的方式來解決跨域請求問題
3.1.2 實(shí)現(xiàn)
3.1.2.1 安裝 nginx
windows 下 安裝 nginx 最簡單,直接下載壓縮包,然后解壓后
3.1.2.2 配置 nginx
已自帶默認(rèn)配置,如要部署vue、angular這種單頁面應(yīng)用,將打包后的index.html文件以及dist目錄放到發(fā)布目錄中,將路徑復(fù)制,用于配置nginx服務(wù)指向
配置文件如下:
server { listen 9461; # 監(jiān)聽端口號 server_name localhost 192.168.88.22; # 訪問地址 location / { root 項(xiàng)目路徑; # 例如:e:/publish/xxx/; index index.html; # 此處用于處理 vue、angular、react 使用h5 的 history時(shí) 重寫的問題 if (!-e $request_filename) { rewrite ^(.*) /index.html last; break; } } # 代理服務(wù)端接口 location /api { proxy_pass http://localhost:9460/api;# 代理接口地址 } }
3.1.2.3 nginx 常用命令
啟動(dòng):start nginx
重新加載配置:nginx -s reload
重新打開日志文件:nginx -s reopen
測試配置文件是否正確:nginx -t [可選:指定路徑]
快速停止:nginx -s stop
有序停止:nginx -s quit
3.1.3 nginx 單頁面應(yīng)用h5 history url重寫
支持
vue、angular、react
原因
實(shí)現(xiàn)單頁面時(shí),刷新頁面會(huì)產(chǎn)生頁面找不到的問題,所以需要重寫url地址到index.html當(dāng)中。
注意點(diǎn)
在使用nginx中url重寫的時(shí)候,一直報(bào)錯(cuò)如下
檢查后,發(fā)現(xiàn) if 和 ( 之間必須有個(gè)空格。
3.2 other
3.2.1 思路
既然要發(fā)送預(yù)檢請求,是否可以減少預(yù)檢請求的次數(shù)?
例如可以設(shè)定一個(gè)有效期,在有效期內(nèi)不再重復(fù)預(yù)檢。
3.2.2 實(shí)現(xiàn)
可以在服務(wù)端處預(yù)檢完成后加入一個(gè)access-control-max-age請求頭來解決這個(gè)問題。
3.2.3 cors 響應(yīng)字段說明
access-control-allow-methods
該字段必需,它的值是逗號分隔的一個(gè)字符串,表明服務(wù)器支持的所有跨域請求的方法。
注意,返回的是所有支持的方法,而不單是瀏覽器請求的那個(gè)方法。這是為了避免多次"預(yù)檢"請求。
access-control-allow-headers
如果瀏覽器請求包括access-control-request-headers字段,則access-control-allow-headers字段是必需的。
它也是一個(gè)逗號分隔的字符串,表明服務(wù)器支持的所有頭信息字段,不限于瀏覽器在"預(yù)檢"中請求的字段。
access-control-allow-credentials
該字段與簡單請求時(shí)的含義相同。
access-control-max-age
該字段可選,用來指定本次預(yù)檢請求的有效期,單位為秒。上面結(jié)果中,有效期是20天(1728000秒),即允許緩存該條回應(yīng)1728000秒(即20天),在此期間,不用發(fā)出另一條預(yù)檢請求。
access-control-allow-methods: get, post, put access-control-allow-headers: x-custom-header access-control-allow-credentials: true access-control-max-age: 1728000
“WebApi跨域二次請求及Vue單頁面問題怎么解決”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。