鍍金池/ 問答/Java  HTML/ 如何在koa項(xiàng)目中區(qū)分頁面請(qǐng)求和api請(qǐng)求?

如何在koa項(xiàng)目中區(qū)分頁面請(qǐng)求和api請(qǐng)求?

我的項(xiàng)目后端是koa，前端是vue的SPA。所有的頁面請(qǐng)求我用koa-router是這樣配的：

router.get(/\/\.*/, async ctx => {
    ctx.body = await ctx.render('app/index.html')
})

但是這樣一來，所有的api請(qǐng)求也會(huì)返回index.html

clipboard.png

順便再問一個(gè)和koa-jwt相關(guān)的問題，其實(shí)也是路徑匹配的問題，因?yàn)槲抑挥心承┱?qǐng)求需要鑒權(quán)，像頁面請(qǐng)求、靜態(tài)資源和auth相關(guān)的接口是不需要鑒權(quán)的，我現(xiàn)在是這樣寫的：

// jwt鑒權(quán)
app.use(koajwt({
    secret: host
}).unless({
    path: [/\/api\/admin\/auth/, /\/api\/auth/, /\/admin/, /\/server\/static/, /^$|^\/$/]
}))

我覺得在unless里配那么一大段有點(diǎn)奇怪，想問下有什么更優(yōu)雅的方法？

-------------------update-----------------------

clipboard.png

clipboard.png

回答
編輯回答
神經(jīng)質(zhì)

api 代碼的路由放到前面，最后這個(gè)中間件作為 fallback 就好了

2018年5月6日 03:39
編輯回答
清夢(mèng)

這個(gè)是我自己寫的 demo koa, 我用它 只起api和靜態(tài)支持上傳圖片（這個(gè)其實(shí)也可以只讓nginx去代理圖片， 不讓node去做靜態(tài)資源相關(guān)的事情）。
圖片描述...

你可已配置nginx 反向代理代理接口, 類似這種

        server {
          listen       80;
          server_name xxx.cn;
           #location / {
           #         proxy_pass http://127.0.0.1:9000;
           # }
       location / {
              root  F:\web\backer\\react\dist;
             try_files $uri $uri/ /index.html;
        }    
       location ~ ^/api/(.*) {
        proxy_pass http://127.0.0.1:3000/$1;    
        proxy_set_header Host      $host;
           proxy_set_header X-Real-IP $remote_addr;
           }    

        }

把nginx 配置截下圖。這么配置是 root F:webbacker\reactdist; try_files $uri $uri/ /index.html; 這么配置是 在 F:webbacker\reactdist 這個(gè)目錄下， 有你靜態(tài) index.html，在沒有其他配置的前提下，訪問的url永遠(yuǎn) 是指向 index.html；應(yīng)該是 這樣的.

自己的網(wǎng)站 單頁spa
圖片描述
圖片描述

根據(jù) 我自學(xué)nginx(菜鳥)
這個(gè)兩個(gè)日志很重要。
clipboard.png

2018年3月4日 19:55