Node.js第十三篇：koa框架處理跨域請求

目錄

• 第一章：jsonp
• 第二章：CORS

第一章：jsonp

web01：服務端程序，端口80

安裝koa-jsonp模塊：npm install koa-jsonp

服務端程序中導入和配置jkoa-jsonp模塊

const koa = require('koa')
const router = require('koa-router')()
// 導入koa-jsonp模塊
const jsonp = require('koa-jsonp')

const app = new koa()

// 處理jsonp請求
router.get('/list', async (ctx) => {
  // 接收回調函數名稱
  let callbackName = ctx.query.callback || 'callback'
  // 返回jsonp
  ctx.body = callbackName + `(${JSON.stringify(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'])})`
})


app.use(router.routes())
app.use(router.allowedMethods());
//配置 jsonp 的中間件 
app.use(jsonp());

app.listen(80)

web02：前端程序，端口8080

  <button id="btn1">跨域-jsonp：發送異步請求</button>
  <script src="./jquery.js"></script>
  <script>
    // jsonp請求
    $('#btn1').click(function(){
      $.ajax({
        async:false,  
        url:'http://localhost/list',
        xhrFields: {widthCredentials:true},
        dataType: 'JSONP',
        success:function(data){
          console.log(data)
        }
      })
    })
 </script>

第二章：CORS

web01：服務端程序，端口80

安裝koa2-cors模塊：npm insall koa2-cors

配置和導入koa2-cors模塊

const koa = require('koa')
const router = require('koa-router')()
// 導入koa2-cors模塊
const cors = require('koa2-cors')

const app = new koa()

//配置 cors 的中間件 
app.use(
  cors({
      origin: function(ctx) { //設置允許來自指定域名請求
          if (ctx.url === '/test') {
              return '*'; // 允許來自所有域名請求
          }
          return 'http://localhost:8080'; //只允許http://localhost:8080這個域名的請求
      },
      maxAge: 5, //指定本次預檢請求的有效期，單位為秒。
      credentials: true, //是否允許發送Cookie
      allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], //設置所允許的HTTP請求方法
      allowHeaders: ['Content-Type', 'Authorization', 'Accept'], //設置服務器支持的所有頭信息字段
      exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'] //設置獲取其他自定義字段
  })
)

router.get('/list', async (ctx) => {
  ctx.body = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
})

router.get('/test', async (ctx) => {
  ctx.body = 'test-ok';
})


app.use(router.routes())
app.use(router.allowedMethods());

app.listen(80)

web02：前端程序，端口8080

  <button id="btn1">跨域-cors：發送異步請求1</button>
  <button id="btn2">跨域-cors：發送異步請求2</button>
  <script src="./jquery.js"></script>
  <script>
    // ajax請求
    $('#btn1').click(function(){
      $.ajax({
        url:'http://localhost/list',
        success:function(data){
          console.log(data)
        }
      })
    })
    // ajax請求
    $('#btn2').click(function(){
      $.ajax({
        url:'http://localhost/test',
        success:function(data){
          console.log(data)
        }
      })
    })
 </script>