Nginx代理后端API（處理前端跨域問題）

背景

現代前端開發往往采用前后端分離的方式並行開發，但是在部署的時候會發現前端會報跨域的錯誤。

原因

瀏覽器采用同源策略來保護我們的隱私及安全，禁用了跨域請求的能力。

解決辦法

1. 后端開啟跨域（有選這種的🐴 🤪）
2. 使用nginx代理后端接口（常規方式）

實現方式

希望能通過nginx將瀏覽器的請求代理到后端的API接口實現跨域請求的目的，例如：當瀏覽器請求 /api/users 的時候，通過nginx將請求轉發到 http://192.168.0.1:8080/users 已實現我們目的。

以下是nginx極簡的配置：

{
   server {
    listen 3000;
    server_name localhost;

    location / {
        root /var/www/mainApp; ###配置應用的文件夾
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    
    ###代理后端API的配置
    location /api/ {
        proxy_pass http://192.168.0.1:8080/;
    }
}

nginx配置完成后執行nginx -s reload重載配置后即可順利訪問。

補充說明：前文中的請求/api/users代表spa項目中后端API的全路徑訪問URL，一般項目中會有一個base_url（當然也有可能是其它的名稱）的全局API的基礎路徑，如果不使用代理base_url應為：http://192.168.0.1:8080，使用代理時base_url應為：/api，通俗的講就是我們在spa項目中使用/api替換了http://192.168.0.1:8080的寫法。