VUE proxyTable解决跨域问题

proxyTable是什么？

vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了http-proxy- middleware（https://github.com/chimurai/http-proxy-middleware），它是http代理中间件，它依赖node.js， 基本原理是用服务端代理解决浏览器跨域：

通过proxyTable由node服务器代理请求 http://localhost:31001（服务端不存在跨域问题）

为什么会出现跨域问题

原因：浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同。
解决方法1：采用proxyTable解决。

1.修改api方法中url的定义
import http from '@/base/api/public'
import querystring from 'querystring'
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;
export const page_test= id => {
  return http.requestQuickGet(apiUrl+'/cms/user/get/'+id)
} 

2.在config/index.js下配置proxyTable。
proxyTable: {
      '/api/cms': {
        target: 'http://localhost:31001',
        pathRewrite: {
          //把api 替换成 空字符串
          '^/api': ''
        }
}

解决方法2：采用java后台解决

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
    @Autowired
    private EnvConfig envConfig;
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new HandlerInterceptor() {
            @Override
            public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
                    throws Exception {
                boolean isTrue = envConfig.getIsDev();//判断是测试服才需要解决跨域问题
                if (isTrue) {
                    response.addHeader("Access-Control-Allow-Origin", "*");
　　　　　　　　　　   response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
                    response.addHeader("Access-Control-Allow-Headers",
                            "Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,token");
                }
                return true;
            }

            @Override
            public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
                    ModelAndView modelAndView) throws Exception {

            }

            @Override
            public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler,
                    Exception ex) throws Exception {
            }
        });
    }
}