跨域cors 和 jsnop | koa 提供服務器 （實例前端 -後端演示）

文章目的 驗證一下對跨域的理解-

前端須要都須要配置
後端相應配置什麼

首先跨域方式不止這兩種 iframe.posetMessage form 表單也可。

====
項目地址 （https://github.com/L6zt/corssDomain-demo）
原理說明：

• jsonp

什麼叫作jsonp請求，其實就至關於在頁面里加載遠程腳本資源，
加載完頁面就會執行裏面的函數，也就是爲何你會發現
jsonp 請求結果裏 jsonp1({a: 1}); jsonp1就是函數（只不過相似jquery 已經把這個函數 放在window下了），
jsonp1({a: 1}) 至關與執行函數，因此你就能拿到數據參數了。

• cors

這個是xhr 2 提供跨域的方式
cors文檔
我後端node 服務器，照這個文檔寫的，純自手擼。
`const Koa = require('koa');
// 路由
const Router = require('koa-router');
//
const path = require('path');
//提供靜態文件服務
const koaStaticServer = require('koa-static-server');
// 打開瀏覽器
const opn = require('better-opn');
// 服務器 1
const wwwLocalhostComServer = new Koa();
// 服務器 2
const mLocalhostComServer = new Koa();

// 跨域路由
const wwwCorsRouter = new Router({
prefix: '/cors'
});
// 非跨域路由
const wwwNotCorsRouter = new Router({
prefix: '/nm'
});
// jsonp 請求
const wwwJsonpRouter = new Router({
prefix: '/jsonp'
});
// 跨域接口

wwwCorsRouter.use('/', (ctx, next) => {
const {request} = ctx;
const {header: { origin }, method} = request;
ctx.response.set('Access-Control-Allow-Origin', origin);
next();
}).post('/setCookie', (ctx, next) => {
const result = {

flag: 1,
data: {
  message: 'we set cookie in different domain',
}

};
ctx.response.set('Access-Control-Allow-Credentials', 'true');
ctx.response.set('Set-Cookie', auth=love; Expries=${new Date(Date.now() + 60 * 60 * 24 * 10 * 1000)}; Path=/);
ctx.cookies.set('inject', 'love', {

expires: new Date(Date.now() + 60 * 60 * 24 * 10 * 1000),

});
ctx.response.set('Content-type', 'application/json');
ctx.body = JSON.stringify(result);

}).post('/normalData', (ctx, next) => {
const result = {

flag: 1,
 data: {
   message: 'we like each other'
 }

}
ctx.response.set('Content-type', 'application/json');
ctx.body = JSON.stringify(result);
});

// 非跨域接口

wwwNotCorsRouter.use('/', (ctx, next) => {
ctx.response.set('Custom-Server-Sp', 'love');
next();
}).post('/data', (ctx, next) => {
const result = {

flag: 1,
data: {
  message: 'we are not in the same domain',
}

};
ctx.response.set('Content-type', 'application/json');
ctx.body = JSON.stringify(result);
});

// jsonp 接口
wwwJsonpRouter.get('/data', (ctx, next) => {
const {request} = ctx;
const {header: { origin }, method, query} = request;
const {callback} = query;
if (!callback) {

ctx.body = JSON.stringify({
  flag: 0,
  message: '參數校驗失敗',
})
return

} else {

// 至關與返回 js文件
// 文本內容 js文件
ctx.response.set('Content-type', 'application/javascript');
ctx.body = [
   `${callback}(`,
   JSON.stringify({flag: 0, data: {payload: {key: 'love'}}}),
   ')'
].join('');

}
})
wwwLocalhostComServer.use((ctx, next) => {
const {request} = ctx;
const {header:{ origin , path}, method} = request;
// 對某些特殊 cors 作處理 詳情 mdn 文檔
if (method === 'OPTIONS') {
ctx.response.set('Access-Control-Allow-Origin', origin);
ctx.response.set('Access-Control-Request-Method' , 'POST');
ctx.response.set('Access-Control-Allow-Headers', 'Content-Type');
ctx.response.set('Access-Control-Allow-Credentials', true);
ctx.body = ''
} else {

next();

}
});
wwwLocalhostComServer.use(wwwCorsRouter.routes());
wwwLocalhostComServer.use(wwwNotCorsRouter.routes());
wwwLocalhostComServer.use(wwwJsonpRouter.routes());
mLocalhostComServer.use(koaStaticServer({
rootDir: path.join(__dirname, './m.assert')
}));
wwwLocalhostComServer.use(koaStaticServer({
rootDir: path.join(__dirname, './www.assert'),
}));
wwwLocalhostComServer.listen(7001, () => {
console.log(' -- *');
console.log('端口爲 7001的接口啓動了');
console.log(' --- ');
});
mLocalhostComServer.listen(7002, () => {
console.log(' -- *');
console.log('端口爲 7002的服務器啓動了');
console.log(' --- ');
opn('http://localhost:7002');});`