使用http-proxy-middleware解决vue开发中的跨域问题

使用http-proxy-middleware解决vue开发中的跨域问题

一、vue-cli中使用代理解决跨域问题

1、首先安装axios与http-proxy-middleware（vue-cli中默认已经安装）
2、在config/index.js中的dev中配置
		 proxyTable: {  
    '/api':{
        target:'http://xxx',  //这是跨域目标域名
        changeOrigin:true,
        pathRewrite:{
            '^/api':''
        }
    }
}

3、在main.js中加上如下配置：
		Axios.defaults.baseURL = '/api/'

即可跨域，http://xxx已经用/api/来代替，不需要再写

二、在自己搭建的项目上使用代理解决跨域问题（webpack的webpack-dev-server中配置代理即可）

1、首先安装axios与http-proxy-middleware
2、在webpack配置文件webpack.config.js中，找到webpack-dev-server的配置进行配置，配置如下：
devServer:{
host:‘localhost’,
port:8080,
compress:true,
（proxy对象就是要添加的内容，其他的是原本webpack-dev-server的配置）
proxy:{
“/api”:{
target:‘http://xxx’（这是目标接口所在域名）,
changeOrigin:true,
pathRewrite:{
‘^/api’:’’
}
}
}
}

3、现在就可以在开发环境中使用跨域了，这里用/api代替http://xxx，不想在Axios请求中每次都写/api可以在main.js中加入
Axios.defaults.baseURL = '/api/'即可。

这只是于开发过程中解决跨域问题，上线阶段就不适用了。