鍍金池/ 問答/C  Linux  HTML/ Ngin+Node 請求代理如何區(qū)分前端靜態(tài)資源代理與接口請求代理,跨域如何解決

Ngin+Node 請求代理如何區(qū)分前端靜態(tài)資源代理與接口請求代理,跨域如何解決適合?

如何使用Nginx反向代理請求能夠?qū)㈧o態(tài)資源與接口請求區(qū)分開?

本人純前端一名,在擴展后端知識,打算使用Node+Nginx試著走后端知識,因為Node的優(yōu)勢在于處理I/O,所以打算將靜態(tài)資源交給Nginx來代理

    # 靜態(tài)資源虛擬主機
    server {
        # 偵聽8130端口
        listen       8130;
        #定義使用 www.redcoat.com訪問
        server_name  www.redcoat.com;

        #charset koi8-r;
        root /Users/gi/Desktop/BandApp/WWW/www.redcoat.com/dist;
        # 設(shè)定本虛擬主機的訪問日志
        #access_log  logs/host.access.log  main;

        # 默認(rèn)請求
        location / {
            # 定義服務(wù)器的默認(rèn)網(wǎng)站根目錄位置
            root   /Users/gi/Desktop/BandApp/WWW/www.redcoat.com/dist;
            # 定義首頁索引文件的名稱
            index  index.html index.htm;
        }

        # 靜態(tài)文件,nginx自己處理
        location ~ ^/(images|javascript|js|css|flash|media|static)/ {
            
            #過期30天,靜態(tài)文件不怎么更新,過期可以設(shè)大一點,
            #如果頻繁更新,則可以設(shè)置得小一點。
            expires 30d;
        }


        # 定義錯誤提示頁面
        error_page  404              /404.html;

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

    }

疑問

  1. 先上代碼,這是我在Nginx中的靜態(tài)資源代理配置,代碼也的確生效成功了但是如果我想請求的不是靜態(tài)資源,而是后臺的接口了?這樣子配的話,豈不是我沒加一個接口都要在這里配置一條路徑匹配?(正確做法是怎樣的?是像我寫的下面那樣解決嗎?)
  2. 在未得到正確做法前,我思考了一下寫前端時請求后臺,我想到的是將后臺的域名跟前臺域名區(qū)分下,做一個子域名,這樣前臺請求接口就可以直接請求后臺的域名接口,然后在Nginx中在代理下后臺域名的請求,反向的Node應(yīng)用中,可是這樣做前端請求后端好像跨域了(之前以為子域名不會跨域),如果這樣是正確的配置方法,那跨域問題后臺怎么處理合適
# 服務(wù)器虛擬主機
    server {
        # 偵聽80端口
        listen       8130;
        #定義使用 www.redcoat.com訪問
        server_name  node.redcoat.com;

        #charset koi8-r;

        # 設(shè)定本虛擬主機的訪問日志
        #access_log  logs/host.access.log  main;

        # 默認(rèn)請求
        location / {
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header Host $http_host;
           # proxy_set_header X-Nginx-Proxy true;
           proxy_set_header Connection "";
           # 代理目標(biāo)的地址
           proxy_pass http://node.redcoat.com:8080;
        }



        # 定義錯誤提示頁面
        error_page  404              /404.html;

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
回答
編輯回答
不討囍

可以把后端的請求都統(tǒng)一加上前綴,如 /api/

2018年5月1日 14:20
編輯回答
雨萌萌
     server {
        listen       80; 
        server_name  www.xxx.cn;
         // 服務(wù)器渲染
          location / {
            proxy_pass      http://127.0.0.1:7009;
            #proxy_set_header Host      $host;
            #proxy_set_header X-Real-IP $remote_addr;
          }
          # api
          location ~ ^/backer {
             proxy_pass http://api.xxx.cn;
             #proxy_set_header  X-Real-IP        $remote_addr;
             #proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
          }
         # socket
         location ~ ^/socket\.io {
           proxy_pass http://127.0.0.1:7010;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "upgrade";
          }
          # static 資源
         location ~ ^/res(.*\.(js|css|jpg|png|ico|mp3)$) {    
              # rewrite ^/react/(.*) /$1 last;
              alias F:\web\git\vuessr\dist\$1;
         }
         
      }
2017年11月6日 16:18