前端axios+webpack解决跨域问题（不依靠后端，独立解决跨域）

前端axios+webpack解决开发环境跨域问题（不依靠后端，独立解决跨域问题）

以 vue 项目举例：

// ...
axios.get('https://xxx.com/api/getinfo').then(res => {
	console.log(res);
}).catch(err => {
	console.log(err)
})

直接这么写，会出现 跨域问题，接下来通过webapck配置代理来解决

vue-cli3创建的项目配置

在根目录新建文件 vue.config.js ，写入以下代码

module.exports = {
    devServer: {
        proxy: { // 设置代理
            '/api: {
                target: 'https://xxx.com', // 请求的目标服务器接口
                changeOrigin: true, 
                pathRewrite: {
                    '^/api': '/api'
                }
            }
        }
    }
}

vue-cli2创建的项目配置

// 路径：config/index.js
proxyTable: {
    '/api': {
        target: 'https://xxx.com',
        changeOrigin: true,
        pathRewrite: {
            '^/api': '/api'
        }
    }
}

这个时候再进行请求就不会出现跨域（注意请求的url变化）

axios.get('/api/getinfo').then(res => {
	console.log(res);
}).catch(err => {
	console.log(err)
})