vue学习篇-代理的使用

[hehongwei44]

其实关于代理的使用，前面有了大概的介绍了，这里主要是记录使用用列相关方面的知识点。

[hehongwei44]

var express = require('express');
var proxy = require('http-proxy-middleware');

var app = express();

app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
app.listen(3000);

// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar 

这个是将本地的/api请求通过代理转发到http://www.example.org/api/上面，同时/api/xxx/yyy会转发到http://www.example.org/api/xxx/yyy上面

对于changeOrigin的用法说明如下：

加了这个，代理服务器会在请求头中加入相应Host首部，然后目标服务器就可以根据这个首部来区别要访问的站点了。假如你在本地80端口起了apache服务器，服务器配了两个虚拟站点a.com b.com,设置代理之后并且changeOrigin为true 。此时就可以正确方法问道虚拟主机下的文档内容。否则访问a b站点等同于访问localhost。webpack dev sever用的是node-http-proxy, 你可以找这个相关的资料。

[hehongwei44]

// include dependencies 
var express = require('express');
var proxy = require('http-proxy-middleware');

// proxy middleware options 
var options = {
        target: 'http://www.example.org', // target host 
        changeOrigin: true,               // needed for virtual hosted sites 
        ws: true,                         // 代理 websockets 
        pathRewrite: {
            '^/api/old-path' : '/api/new-path',     // 重写路径 
            '^/api/remove/path' : '/path'           // 移出基础路径
        },
        router: {
            // when request.headers.host == 'dev.localhost:3000', 
            // override target 'http://www.example.org' to 'http://localhost:8000' 
            'dev.localhost:3000' : 'http://localhost:8000'
        }
    };

// create the proxy (without context) 
var exampleProxy = proxy(options);

// mount `exampleProxy` in web server 
var app = express();
    app.use('/api', exampleProxy);
    app.listen(3000);