一、前言

由于項目是前后端分離，API接口與Web前端 部署在不同站點當中，因此在前文當中WebApi Ajax 跨域請求解決方法（CORS實現）使用跨域處理方式處理而不用Jsonp的方式。

但是在一段時間后，發現一個很奇怪的問題，每次前端發起請求的時候，通過瀏覽器的開發者工具都能看到在Network下同一個url有兩條請求，第一條請求的Method為OPTIONS，第二條請求的Method才是真正的Get或者Post，并且，第一條請求無數據返回，第二條請求才返回正常的數據。

二、原因

第一個OPTIONS的請求是由WEB服務器處理跨域訪問引發的。OPTIONS是一種預檢請求，瀏覽器在處理跨域訪問的請求時，如果判斷請求為復雜請求，則會先向服務器發送一條預檢請求，根據服務器返回的內容，瀏覽器判斷服務器是否允許訪問該請求。如果WEB服務器采用CORS的方式支持跨域訪問，在處理復雜請求時這個預檢請求是不可避免的。

由于我們的WEB服務器采用CORS來解決跨域訪問的問題，同時在header中添加了自定義參數以及使用json格式來進行數據交互，導致我們的每次請求都是復雜請求，從而產生每次請求都會發送兩條請求的現象。

產生原因如下：

使用CORS解決跨域問題

三、解決方案

3.1 Nginx

3.1.1 思路

將前端項目部署在Nginx當中，通過代理的方式來解決跨域請求問題

3.1.2 實現

3.1.2.1 安裝 Nginx

Windows 下 安裝 Nginx 最簡單，直接下載壓縮包，然后解壓后

3.1.2.2 配置 Nginx

已自帶默認配置，如要部署Vue、Angular這種單頁面應用，將打包后的index.html文件以及dist目錄放到發布目錄中，將路徑復制，用于配置Nginx服務指向

配置文件如下：

server { listen 9461; # 監聽端口號 server_name localhost 192.168.88.22; # 訪問地址 location / { root 項目路徑; # 例如：E:/Publish/xxx/; index index.html;  # 此處用于處理 Vue、Angular、React 使用H5 的 History時 重寫的問題 if (!-e $request_filename) { rewrite ^(.*) /index.html last; break; } }  # 代理服務端接口 location /api { proxy_pass http://localhost:9460/api;# 代理接口地址 } }

3.1.2.3 Nginx 常用命令

啟動：start nginx

重新加載配置：nginx -s reload

重新打開日志文件：nginx -s reopen

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

快速停止：nginx -s stop

有序停止：nginx -s quit

3.1.3 Nginx 單頁面應用H5 History Url重寫

支持

Vue、Angular、React

原因

實現單頁面時，刷新頁面會產生頁面找不到的問題，所以需要重寫Url地址到index.html當中。

注意點

在使用Nginx中URL重寫的時候，一直報錯如下