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

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

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

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

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

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

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

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


        # 定義錯(cuò)誤提示頁(yè)面
        error_page  404              /404.html;

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

    }

疑問(wèn)

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

        #charset koi8-r;

        # 設(shè)定本虛擬主機(jī)的訪(fǎng)問(wèn)日志
        #access_log  logs/host.access.log  main;

        # 默認(rèn)請(qǐng)求
        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;
        }



        # 定義錯(cuò)誤提示頁(yè)面
        error_page  404              /404.html;

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

可以把后端的請(qǐng)求都統(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