Vue3.0 代理解决跨域

Posted 2021-09-22 ￡漫步 云端彡

Vue@3.0反向代理跨域

---

使用代理解决跨域，方便的是不需要后端配置cors跨域，而且在使用elementui部分组件不会出那么多错。例如：上传组件跨域请求。但是由于使用代理方式请求，会出现另外的问题: 1. 请求session不一致；2. cookie信息无法保存。注意：该代理仅使用在开发环境中，生产环境可将打包后文件放在项目路径下，或者在服务器上配置

---

在Vue 3.0版本中没有config目录，需要在项目根目录下创建三个文件：vue.config.js、.env.development和.env.production，其中后两个表示开发环境和生产环境配置。使用命令serve启动时vue加载的是.env.development，使用build启动加载的是.env.production，其文件中属性命名规范（最好）：

属性名必须以VUE_APP_开头，比如VUE_APP_XXX

vue.config.js的配置如下：

module.exports = {
	devServer: {
		//端口号
		port: 8082,
		//自动打开浏览器
		open: true,
		// 配置代理 
		proxy: {
			"/api": {
				target: process.env.baseURL,//在.env.development和.env.production配置过的数据，例如：http://localhost:8082/
				// 是否改变域名
				changeOrigin: true, 
				// 代理websockets
				ws: true,
				// 路径重写
				pathRewrite: {
					/**
					 * 注意：一般项目有统一的访问名称：如api,此时需要路径重写为如下，相当于代理为：http://localhost:8082/api,如果请求
					 * 路径为：http://localhost:8082，那么就不需要重写代理名，或者写为："/api": "/"
					 */
					"/api": "/api"
				},
				//重写cookie路径，很有必要，此操作可以保证浏览器中可以保存cookie值
				cookiePathRewrite: {
					'/api': '/'
				}
			}
		},
	}
};

//axios请求调用很简单，将路径名替换为代理名即可，例：
axios({
        method: "get",
        url: "api/getdata",  //使用 api+具体接口路径 
        params: {
          id:1
        }
      }).then(function(res) {
        console.log(res)
        })

注意：代理名称为/api，是必须和访问项目名称，即访问项目根目录，否则每次请求session不一致