koa2-cors應答跨域請求實現

var koa = require('koa');
var app = new koa();
var router = require('koa-router')();
// CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。
// 下面以koa2-cors爲例，
const cors = require('koa2-cors');

// 具體參數咱們在後面進行解釋
app.use(cors({
    origin: function (ctx) {
        if (ctx.url === '/test') {
            return "*"; // 容許來自全部域名請求
        }
        return 'http://localhost:8080'; / 這樣就能只容許 http://localhost:8080 這個域名的請求了
    },
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
    maxAge: 5,
    credentials: true,
    allowMethods: ['GET', 'POST', 'DELETE'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}))

router.post('/', async function (ctx) {
    ctx.body = '恭喜 __小簡__ 你成功登錄了'
});

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

app.listen(3000);

　　二、下面咱們在http://localhost:8080發送請求進行測試

this.$axios.post('http://172.16.186.50:3000/', {})
                    .then((response) => {
                        console.log(response)
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

　　

三、下面咱們以具體的請求頭信息解釋上面的代碼，也就是cors具體的實現過程

 

// 咱們能夠用下面的中間件理解app.use(cors({}))
app.use(async (ctx, next) => {
    // 容許來自全部域名請求
    ctx.set("Access-Control-Allow-Origin", "*");
    // 這樣就能只容許 http://localhost:8080 這個域名的請求了
    // ctx.set("Access-Control-Allow-Origin", "http://localhost:8080"); 

    // 設置所容許的HTTP請求方法
    ctx.set("Access-Control-Allow-Methods", "OPTIONS, GET, PUT, POST, DELETE");

    // 字段是必需的。它也是一個逗號分隔的字符串，代表服務器支持的全部頭信息字段.
    ctx.set("Access-Control-Allow-Headers", "x-requested-with, accept, origin, content-type");

    // 服務器收到請求之後，檢查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段之後，確認容許跨源請求，就能夠作出迴應。

    // Content-Type表示具體請求中的媒體類型信息
    ctx.set("Content-Type", "application/json;charset=utf-8");

    // 該字段可選。它的值是一個布爾值，表示是否容許發送Cookie。默認狀況下，Cookie不包括在CORS請求之中。
    // 當設置成容許請求攜帶cookie時，須要保證"Access-Control-Allow-Origin"是服務器有的域名，而不能是"*";
    ctx.set("Access-Control-Allow-Credentials", true);

    // 該字段可選，用來指定本次預檢請求的有效期，單位爲秒。
    // 當請求方法是PUT或DELETE等特殊方法或者Content-Type字段的類型是application/json時，服務器會提早發送一次請求進行驗證
    // 下面的的設置只本次驗證的有效時間，即在該時間段內服務端能夠不用進行驗證
    ctx.set("Access-Control-Max-Age", 300);

    /*
    CORS請求時，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：
        Cache-Control、
        Content-Language、
        Content-Type、
        Expires、
        Last-Modified、
        Pragma。
    */
    // 須要獲取其餘字段時，使用Access-Control-Expose-Headers，
    // getResponseHeader('myData')能夠返回咱們所需的值
    ctx.set("Access-Control-Expose-Headers", "myData");

    await next();
})

　　四、理解的上面的代碼，估計你也能猜到app.use(cors({}))裏面的配置信息了。固然還有其餘可選的信息，具體設置並沒有多大差異，在這就很少解釋了。
五、注：咱們還能夠經過在前端配置代理的方式來實現跨域請求。