簡單配置nginx反向代理，實現跨域請求

簡單配置nginx去做反向代理，實現跨域請求

簡單介紹nginx的nginx.conf最核心的配置，去做反向代理，實現跨域請求。

更多詳細配置，參考nginx官方文檔

先介紹幾個nginx命令

1. 打開nginx.conf文件
   /usr/local/etc/nginx/nginx.conf
2. 重新加載配置|重啟|停止|退出 nginx
   nginx -s reload|reopen|stop|quit
3. 打開nginx服務
   nginx

上code：配置nginx.conf的文件

以下是nginx.conf文件里的serve部分

server {
    # 配置服務地址
    listen       9000;
    server_name  localhost;
    
    # 訪問根路徑，返回前端靜態資源頁面
    location / {
        # 前端代碼服務地址
        proxy_pass http://localhost:8000/;  #前端項目開發模式下，node開啟的服務器，根路徑下可打開index.html
    }
    
    # 最簡單的API代理配置
    # 約定：所有不是根路徑下的資源，都是api接口地址。則可代理如下
    location /* {
        # API 服務地址
        proxy_pass http://www.serverA.com;  #將真正的請求代理到API 服務地址,即真實的服務器地址，ajax的url為/user/1將會訪問http://www.serverA.com/user/1
    }
    
    # 需要更改rewrite 請求路徑的配置
    location /api/ {
        rewrite ^/api/(.*)$ /$1 break;   #所有對后端的請求加一個api前綴方便區分，真正訪問的時候移除這個前綴
        # API Server
        proxy_pass http://www.serverA.com;  #將真正的請求代理到serverA,即真實的服務器地址，ajax的url為/api/user/1的請求將會訪問http://www.serverA.com/user/1
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

• 配置好nginx.config后，做以下操作。

1. 啟動nginx服務。終端執行：nginx
2. 前端項目，index.html同級目錄起服務，監聽8000端口。自然你可以通過http://localhost:8000訪問到頁面。但是同時，由於訪問nginx服務http://localhost:9000的地址，被代理到了http://localhost:8000地址。所以訪問http://localhost:9000，也可以訪問到此index.html頁面。
3. 項目中，所有接口地址為/或者為http:localhost:9000/的都會被代理到http://www.serverA.com/*去訪問。從而實現本地開發環境下跨域請求線上http://www.serverA.com的接口。例如ajax的url是/api/user/1，經過代理后發起的請求url是http://www.serverA.com/api/user/1，達到目的，且沒有跨域

關於mac如何安裝nginx，並啟動nginx服務。可參考他人博客