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);

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

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

　　

3、下面我們以具體的請求頭信息解釋上面的代碼，也就是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();
})

　　4、理解的上面的代碼，估計你也能猜到app.use(cors({}))里面的配置信息了。當然還有其他可選的信息，具體設置並無多大差別，在這就不多解釋了。
5、注：我們還可以通過在前端配置代理的方式來實現跨域請求。