跨域之代理服务

代理服务

• 跨域解决方法一（jsonp）
• 跨域解决方法二（CORS）
• 跨域是浏览器规范，通过同服务器请求数据，不通过浏览器请求，也能解决浏览器限制；
• 代理服务转发请求
• 利用http模块实现简单的服务器转发
• 利用 koa-server-http-proxy中间件实现代理
• 正向代理
  
• 反向代理
  

http模块实现代理

• node.js既可以做客户端也可以做服务端
• 利用这个特性，可以再提供一个代理服务，去访问其他的服务器
• 如果不满足静态代理，那么就执行代理服务

const Koa = require('koa');
const http = require('http');
const app = new Koa();
app.use(async (ctx, next) => {
    console.log("代理服务");
    if (ctx.request.url == '/api') {
        // 请求http://localhost:8081/getPhotos
        //请求代理
        // 不受同源策略的限制
        let data =  await proxyRequest(ctx);
        ctx.body = data;
    }
    await next();
})
//静态代理
app.use(KoaStaticCache('./public', {
    prefix: '/public',
    gzip: true,
    dynamic: true
}));

app.listen(8083);

function proxyRequest(ctx){
    const options = {
        protocol: 'http:',
        hostname: 'localhost',
        port: 8081,
        path: '/getPhotos',
        method: 'get',
        headers: ctx.request.header
    };
    return new Promise(resolve => {
        const req = http.request(options, res =>{
            res.on('data', (chunk) => {
                console.log(`BODY: ${chunk}`);
                data += chunk.toString();
            });
              res.on('end', () => {
                console.log('data',data);
                resolve(data);
            });
              req.write('');
              req.end;
        });
    })
}

koa-server-http-proxy中间件实现代理

const Koa = require('koa');
const proxy = require('koa-server-http-proxy');
const KoaStaticCache = require('koa-static-cache');
const app = new Koa();
// 正向代理
app.use(proxy('/api', {
    target: 'http://localhost:8081',
    pathRewrite: { '^/api': '' },
    // changeOrigin: true
  }))
//静态代理
app.use(KoaStaticCache('./public', {
    prefix: '/public',
    gzip: true,
    dynamic: true
}));
app.listen(8082);

此时须在原请求地址上加/api:

function loadPhotos() {
    ajax({
        method: "get",
        url: "/api/getPhotos",  //注意
        success(data) {
            data = JSON.parse(data);
            if(Array.isArray(data)){
                data.forEach(d => {
                    createLi(d);
                });
            } 
        }
    })
}