服务器代理的作用
解决跨域：
原理： 利用服务器访问服务器没有跨域问题的原理
请求过程：先向代理(同源)服务器发起请求，再由代理(同源)服务器请求外部服务器
// proxy 中间件的选择项

proxyTable ： {

‘/api’: {

// 目标服务器 host

target: ‘http://10.16.85.138:8080’,

// 默认false，是否需要改变原始主机头为目标URL

changeOrigin: true,

pathRewrite: {

// 重写请求，比如我们源访问的包含/api，那么请求会将/api替换为/yh/ihr/api

‘/api’: ‘/yh/ihr/api’,

== // 重写请求，比如我们源访问的是api/old-path，那么请求会被解析为/api/new-path==

‘^/api/old-path’ : ‘/api/new-path’,

==  // 同上==

‘^/api/remove/path’ : ‘/path’

},

router: {

// 如果请求接口 == ‘/api/’

==  // 则重写目标服务器 ‘http://10.16.85.138:8080’ 为 ‘http://localhost:8000’==

‘/api/’ : ‘http://localhost:8000’

},

==  // proxy事件: 监听请求返回事件==

onProxyRes : proxy.on(‘proxyRes’, function (proxyRes, req, res) {

console.log(‘target’, JSON.stringify(proxyRes.headers, true, 2))

});

}

}
**
在vue项目中直接用
proxyTable: {
      '/info': {
        target: 'http://wangx.jieruiedu.cc',
        changeOrigin: true,
        pathRewrite: {
          '^/info': '/info'
        }
      }
    },

**

服务器代理的作用

解决跨域：


原理： 利用服务器访问服务器没有跨域问题的原理
请求过程：先向代理(同源)服务器发起请求，再由代理(同源)服务器请求外部服务器




代理服务器的搭建


安装 http-proxy-middleware 包

`npm install --save-dev http-proxy-middleware`

一个简单的代理服务器代码

var express = require('express');

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

var app = express();

app.use('/api', proxy({target: 'http://localhost:3001/', changeOrigin: true}));

app.listen(3000);




http-proxy-middleware 的配置


proxy([context,] config)

proxy('/api', {target: 'http://10.16.85.138:8080'})

当发起的请求包含`/api`时，请求就会经过代理服务器，例如：

项目发起的请求地址是：`http://localhost:8000/api`

经过代理服务器就变成了：`http://10.16.85.138:8080/api`
常见的配置对象例子 

// 引用依赖
var express = require('express');
var proxyMiddleware = require('http-proxy-middleware');

// proxy 中间件的选择项
var proxyTable = {
'/api': {
       // 目标服务器 host
       target: 'http://10.16.85.138:8080', 
       // 默认false，是否需要改变原始主机头为目标URL
       changeOrigin: true, 
       pathRewrite: {
         // 重写请求，比如我们源访问的包含/api，那么请求会将/api替换为/yh/ihr/api
        '/api': '/yh/ihr/api', 
         // 重写请求，比如我们源访问的是api/old-path，那么请求会被解析为/api/new-path
        '^/api/old-path' : '/api/new-path',  
        // 同上
        '^/api/remove/path' : '/path'
       },
       router: {
           // 如果请求接口 == '/api/'
           // 则重写目标服务器 'http://10.16.85.138:8080' 为 'http://localhost:8000'
           '/api/' : 'http://localhost:8000'
       },
    // proxy事件: 监听请求返回事件
    onProxyRes : proxy.on('proxyRes', function (proxyRes, req, res) {
      console.log('target', JSON.stringify(proxyRes.headers, true, 2))
    });
}
  }

Object.keys(proxyTable).forEach(function (context) {
 var options = proxyTable[context]
 if (typeof options === 'string') {
   options = { target: options }
 }
 // 创建并使用代理
 app.use(proxyMiddleware(options.filter || context, options))
})
  app.listen(8000);

option.pathRewrite： 对象/函数，重写目标url路径

// 重写
pathRewrite: {'^/old/api' : '/new/api'}

// 移除
pathRewrite: {'^/remove/api' : ''}

// 添加
pathRewrite: {'^/' : '/basepath/'}

// 自定义
pathRewrite: function (path, req) { return path.replace('/api', '/base/api') }
option.router：对象/函数，重新指定请求转发目标

// 使用主机或者路径进行匹配，返回最先匹配到结果
// 所以配置的顺序很重要
router: {
    'integration.localhost:3000' : 'http://localhost:8001',  // host only
    'staging.localhost:3000'     : 'http://localhost:8002',  // host only
    'localhost:3000/api'         : 'http://localhost:8003',  // host + path
    '/api/iaf/search'            : 'http://localhost:8004'   // path only
}

// 自定义
router: function(req) {
    return 'http://localhost:8004';
}
http-proxy 事件

option.onError: 监听proxy错误事件
option.onProxyRes：监听proxy的回应事件
option.onProxyReq：监听proxy的请求事件
代理服务器请求转换图解：

在此较为详细地介绍一下服务器代理设置：
1.     首先讲解PC端web代理（以windows系统为例，iOS可以直接修改）
        我们需要一个代理程序，这里使用shadowsocks代理软件，可自行下载。（如下图）
       
        运行软件后，会出现服务器配置界面，如果没有的话，右击状态栏里小图标，
        在服务器里点击编辑服务器（如下图）
       
       然后我们进入了编辑服务器界面：
       
      
      Ps：IPV4服务器地址与IPV6服务器地址操作完全相同。
      这样就编辑好服务器了。下面说明下如何使用：
      首先选中服务器地址
     
     然后点击启用系统代理，之后再在系统代理模式那里选中PAC模式或全局模式（根据需求），完成操作。
     这样我们就实现了web的代理，但其他软件默认不走代理。

    
2.     下面我们介绍怎样让软件走代理：
     可以通过其他代理软件实现这一目的。以proxifier为例，打开proxifier.exe，
     软件会要求输入注册码， 这个可以根据版本自行查找。
     然后进行配置，操作如图：
     
    点击Check后，出现下面提示，即配置成功。
     
    点ok关掉，然后你刚刚配置的服务器就下面这个：
     
  下一步是确定那些软件要走代理:
     
   如果啊…就想指定哪些走代理：
   
   确认后就这样子，后面的Action选项可以随时改：
   
   这样就把微信单独设置为走代理了，其他程序也一样。
   至此，我们已经实现了全局代理。
3.     下面简要说明一下移动端代理设置：
    可以在苹果商店（安卓软件资源也有很多）下载代理软件，以GoodShadow为例（不同软件大同小异）：
    找到添加代理界面，输入代理名称（随便写），代理服务器（IP），端口，代理密码，点击完成即可。
    然后点击连接即可实现全局代理。
   
























      

vue2.0脚手架设置服务器代理
找到config文件中的index.js中的proxyTable
//设置服务器代理

proxyTable: {

“/api”: {	// api相当于一个别名，代指  http://192.168.0.14:8081

“target”:“http://192.168.0.14:8081”,

“changeOrigin”:true,

“pathRewrite”: {

“^/api”:""

}

}

},
当请求跨域请求数据  http://192.168.0.14:8081/data 时，

只要请求/api/data即可，例如
$.ajax({

url:"/api/data",

success:function(res){

console.log(res)

}

})