在vue单页应用项目开发时，避免不了要请求后端，这时通常就会出现跨域问题。有2种常用的解决方案

1. 后端设置允许跨域访问
2. 前端通过代理进行访问后端

下面我们只说说如何配置vue-cli代理访问：

方法1. vue-cli代理

最简单就是配置vue conifg进行实现
下面配置3个请求的后端，分别是：

• 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/*
• 请求http://localhost:4201/portalapi/*会代理请求http://localhost:8185/*
• 请求http://localhost:4201/securityapi/*会代理请求http://localhost:8089/*

由于vue-cli是基于webpack，因此webpack的devServer选项都是支持配置的

module.exports = {
	// ...
	devServer: {
	    port: 4201,
	    proxy: {
	      '/adminapi': {
	        target: 'http://localhost:8180',
	        ws: true,
	        changeOrigin: true,
	        pathRewrite: {
	          '^/adminapi': ''
	        }
	      },
	      '/portalapi/': {
	        target: 'http://localhost:8185/',
	        ws: true,
	        changeOrigin: true,
	        pathRewrite: {
	          '^/portalapi': ''
	        }
	      },
	      '/securityapi/': {
	        target: 'http://localhost:8089/',
	        ws: true,
	        changeOrigin: true,
	        pathRewrite: {
	          '^/securityapi': ''
	        }
	      }
	    },
	    disableHostCheck: true, // 这是由于新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname 不是配置内的，将中断访问。
  },
  //...
}

方法2. Nodejs做中间时行路由转发

可以用nodejs和框架express对请求做路由转发。
在生产环境下更可以免去使用nginx配置反向代理。
方案各有利弊，技术架构选型时需要针对自己的项目环境，并且适合自己的团队是最好的。

方法3. 后端跨域访问

后端的跨域访问设置也是比较简单的，不同语言JAVA PHP Python Go的设置也大同小异。
查询一下都有比较多的资料，但在生产环境下，为了安全起见，还是建议不要设置允许跨域访问，或者限制允许跨域的IP