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的，前端要手动配置）