代理proxy配置解决跨域

一．配置原因

解决开发模式下跨域的问题。由于同源策略是浏览器端的限制，服务端向服务端发非同源请求是不会有跨域问题的，代理就是利用后者去解决跨域问题。

二．实现方案

1. 在配置请求的时候，无需传server

原请求如下：

  static getUserInfo(payload) {
    return HttpUtils.get({ server: Config.SSO_SERVER, url: 'sso/user', body: payload });
  }
  static getNowFromServer(payload) {
    return HttpUtils.get({ server: Config.ASSIGN_SERVER, url: 'common/getNowFromServer', body: payload });
  }
  static getMenuData(payload) {
    return HttpUtils.post({ server: Config.ASSIGN_SERVER, url: 'menu/findMenuList', body: payload });
    // return HttpUtils.post({ server: menuServer, url: 'menu/findMenuList', body: payload });
  }

现请求如下：

  static getUserInfo(payload) {
    return HttpUtils.get({ url: 'sso/user', body: payload });
  }
  static getNowFromServer(payload) {
    return HttpUtils.get({ url: 'api/common/getNowFromServer', body: payload });
  }
  static getMenuData(payload) {
    return HttpUtils.post({ url: 'api/menu/findMenuList', body: payload });
    // return HttpUtils.post({ url: 'api/menu/findMenuList', body: payload });
  }

 

2.代理转发

这样处理的原因就是当在发起请求时，始终是保证同源的，例如localhost:2000/#/index页面发起的请求就是localhost:2000/sso/user，接下来就是配置代理转发了;

一般同样的服务配置一个请求前缀，有不同的服务的话，就配多个，上述代码中sso的没有配置前缀，用到其他SERVER的，就在请求前加一个api前缀，这主要是直观能看出来。

 

3.配置方法

项目有多个服务，就有多个server配置，具体proxyConfig视项目情况而定，它决定了不同环境下代理转发的地址，参照例子中local的SERVER和SSO_SERVER是配好的，按这样配就行，地址写全：

代码如下：

//配置代理
function getProxy(){
  const env = process.env;
  const action = env.action || 'start';
  const nodeEnv = env.env || 'dev';
  //各个环境下的服务配置
  const proxyConfig = {
    local: {
      SERVER: 'http://dev-api.com.cn',
      SSO_SERVER: 'http://dev-api.com.cn/adjust', //dev
    },
    dev: {
      SERVER: '',
    },
    test: {
      SERVER: '',
    },
    uat: {
      SERVER: '',
    },
    pro: {
      SERVER: '',
    },
  };
  //changeOrigin:true,
  //控制服务器收到的请求头中Host字段的值，标识着从哪发出的,为true是代理的端口，false是本身的端口
  let proxyResult = {
    proxy:{
      '/sso':{
        target:proxyConfig[nodeEnv]['SSO_SERVER'],
        changeOrigin:true,
      },
      '/api':{
        target:proxyConfig[nodeEnv]['SERVER'],
        changeOrigin:true,
      },
    }
  }
  return proxyResult;
}

返回的结果中如：

'/sso':{

        target:proxyConfig[nodeEnv]['SSO_SERVER'],

        changeOrigin:true,

      },

代表请求匹配到sso，就会转发到target配置的地址，这里没有pathRewrite，sso不会被替换；

相当于localhost:2000/sso/user变成了http://dev-api.com.cn/adjust/sso/user。

 

再看一个有pathRewrite的情况：

'/api':{

        target:proxyConfig[nodeEnv]['ASSIGN_SERVER'],

        changeOrigin:true,

        pathRewrite:{

          '^/api':''

        }

      },

代表请求匹配到api，就会转发到target配置的地址，这里有pathRewrite，所以请求中配置的api前缀会被替换成空字符串

也就是localhost:2000/api/menu/findMenuList

变成了http://dev-api.com.cn/api/menu/findMenuList

 

                    target         这是配置的请求，此处的/api会被替换成空

最终结果  http://dev-api.com.cn/menu/findMenuList

这里只是演示一下，可以不用配pathRewrite的，具体视情况而定。

 

4.项目应用

将3中的方法写到webpack.config.js中

在module.export中定义再运用下就好了：

devServer：getServerProxy()