webpack代理的理解

背景： ** 平时开发项目的时候调用接口肯定会遇到跨域的问题，通常是用webpack配置项解决跨域的问题，如下：

1.vue项目中配置config/index.js 中的proxyTable

proxyTbale: {
    '/api': {
        target: 'https://www.baidu.com'
        changeOrigin: true
        pathRewrite: {
            '/api': ''
        }
    }
}

2.配置devServer

// 2.1
devServer: {
    proxy: .... //写法同上
}
// 2.1
devServer: {
    before (app) {
        app.use('/api', (req, res, next) => {
            httpProxy({
              target: `http://www.baidu.com`,
              changeOrigin: true
            })(req, res, next);
        })
    }
}

配置网上一查一大堆，但是我自己的理解能力比较差，不是很明白各个配置项的含义。 尤其是 '/api'是什么意思？为什么要加一个pathRewrite?

个人理解 ** '/api' 是一个匹配项，当有以'/api'开头的请求时要进行代理，代理到target的地址，pathRewrite的目的是，如果你的请求地址里面本来是不带'/api'的它在正真请求的时候把'/api'过滤掉 ** 关于线上跨域 ** 线上解决跨域的方式可以服务端配置nginx代理或者配置Access-Control-Allow-Origin（客户端也需要相应的配置，因为跨域请求是不带cookie的，前端要手动配置）

20190830更新 ** 今天在老项目优化的时候又遇到了一个关于代理的问题，代理配置如下：

proxyTbale: {
    '/': { // 注意这里
        target: 'https://www.baidu.com'
        changeOrigin: true
        pathRewrite: {
            '/api': ''
        }
    }
}

之前用的是hash模式一切都运行正常，服务端也没有做任何的配置。今天想把它转成history模式，在本地调试的时候就出错，如下图：

大概的意思就是没有找到静态资源，也就是html。network请求大概是这样：

http://xxxxx/welcome //这个路由是首页

意思是向服务端请求welcome这个静态资源（welcome/index.html），这显然是找不到的，前面说过服务器端没做过配置，自然会报错。

然后我就纳闷了，我本地起的服务，接口向服务端请求也就算了，但是静态资源为什么也向服务端请求呢？ 最后经sf大神提醒才明白，就是因为代理的问题，上面的代理配置中 '/' 表示匹配所有路径，包含了接口和静态资源，都被代理到了服务端。

所以在页面刷新时因为是history模式所以整个路由都会包含在请求中，比如你的页面路由是www.baidu.com/welcome（读取服…

解决方案

1.代理只匹配接口，比如给接口前面加个特殊标识，只有在接口请求的时候才代理到服务端，但是这种方案放到测试环境或者线上还是会报错 2.最终解决方案，配置服务器nginx做资源重定向，匹配不到的时候都定位到index.html