今天小編給大家分享一下Nginx怎么解決WebApi跨域二次請(qǐng)求及Vue單頁(yè)面的問題的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

創(chuàng)新互聯(lián)公司是一家專業(yè)提供漢壽企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為漢壽眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

一、前言

由于項(xiàng)目是前后端分離，api接口與web前端 部署在不同站點(diǎn)當(dāng)中，因此在前文當(dāng)中webapi ajax 跨域請(qǐng)求解決方法（cors實(shí)現(xiàn)）使用跨域處理方式處理而不用jsonp的方式。

但是在一段時(shí)間后，發(fā)現(xiàn)一個(gè)很奇怪的問題，每次前端發(fā)起請(qǐng)求的時(shí)候，通過瀏覽器的開發(fā)者工具都能看到在network下同一個(gè)url有兩條請(qǐng)求，第一條請(qǐng)求的method為options，第二條請(qǐng)求的method才是真正的get或者post，并且，第一條請(qǐng)求無(wú)數(shù)據(jù)返回，第二條請(qǐng)求才返回正常的數(shù)據(jù)。

二、原因

第一個(gè)options的請(qǐng)求是由web服務(wù)器處理跨域訪問引發(fā)的。options是一種預(yù)檢請(qǐng)求，瀏覽器在處理跨域訪問的請(qǐng)求時(shí)，如果判斷請(qǐng)求為復(fù)雜請(qǐng)求，則會(huì)先向服務(wù)器發(fā)送一條預(yù)檢請(qǐng)求，根據(jù)服務(wù)器返回的內(nèi)容，瀏覽器判斷服務(wù)器是否允許訪問該請(qǐng)求。如果web服務(wù)器采用cors的方式支持跨域訪問，在處理復(fù)雜請(qǐng)求時(shí)這個(gè)預(yù)檢請(qǐng)求是不可避免的。

由于我們的web服務(wù)器采用cors來(lái)解決跨域訪問的問題，同時(shí)在header中添加了自定義參數(shù)以及使用json格式來(lái)進(jìn)行數(shù)據(jù)交互，導(dǎo)致我們的每次請(qǐng)求都是復(fù)雜請(qǐng)求，從而產(chǎn)生每次請(qǐng)求都會(huì)發(fā)送兩條請(qǐng)求的現(xiàn)象。

產(chǎn)生原因如下：

使用cors解決跨域問題

三、解決方案

3.1 nginx

3.1.1 思路

將前端項(xiàng)目部署在nginx當(dāng)中，通過代理的方式來(lái)解決跨域請(qǐng)求問題

3.1.2 實(shí)現(xiàn)

3.1.2.1 安裝 nginx

windows 下 安裝 nginx 最簡(jiǎn)單，直接下載壓縮包，然后解壓后

3.1.2.2 配置 nginx

已自帶默認(rèn)配置，如要部署vue、angular這種單頁(yè)面應(yīng)用，將打包后的index.html文件以及dist目錄放到發(fā)布目錄中，將路徑復(fù)制，用于配置nginx服務(wù)指向

配置文件如下：

server {
 listen 9461; # 監(jiān)聽端口號(hào)
 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

測(cè)試配置文件是否正確：nginx -t [可選:指定路徑]

快速停止：nginx -s stop

有序停止：nginx -s quit

3.1.3 nginx 單頁(yè)面應(yīng)用h5 history url重寫

支持

vue、angular、react

原因

實(shí)現(xiàn)單頁(yè)面時(shí)，刷新頁(yè)面會(huì)產(chǎn)生頁(yè)面找不到的問題，所以需要重寫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ù)檢請(qǐng)求，是否可以減少預(yù)檢請(qǐng)求的次數(shù)？

例如可以設(shè)定一個(gè)有效期，在有效期內(nèi)不再重復(fù)預(yù)檢。

3.2.2 實(shí)現(xiàn)

可以在服務(wù)端處預(yù)檢完成后加入一個(gè)access-control-max-age請(qǐng)求頭來(lái)解決這個(gè)問題。

3.2.3 cors 響應(yīng)字段說(shuō)明

access-control-allow-methods

該字段必需，它的值是逗號(hào)分隔的一個(gè)字符串，表明服務(wù)器支持的所有跨域請(qǐng)求的方法。

注意，返回的是所有支持的方法，而不單是瀏覽器請(qǐng)求的那個(gè)方法。這是為了避免多次"預(yù)檢"請(qǐng)求。

access-control-allow-headers

如果瀏覽器請(qǐng)求包括access-control-request-headers字段，則access-control-allow-headers字段是必需的。

它也是一個(gè)逗號(hào)分隔的字符串，表明服務(wù)器支持的所有頭信息字段，不限于瀏覽器在"預(yù)檢"中請(qǐng)求的字段。

access-control-allow-credentials

該字段與簡(jiǎn)單請(qǐng)求時(shí)的含義相同。

access-control-max-age

該字段可選，用來(lái)指定本次預(yù)檢請(qǐng)求的有效期，單位為秒。上面結(jié)果中，有效期是20天（1728000秒），即允許緩存該條回應(yīng)1728000秒（即20天），在此期間，不用發(fā)出另一條預(yù)檢請(qǐng)求。

access-control-allow-methods: get, post, put
access-control-allow-headers: x-custom-header
access-control-allow-credentials: true
access-control-max-age: 1728000

以上就是“Nginx怎么解決WebApi跨域二次請(qǐng)求及Vue單頁(yè)面的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。