面试被问到前端如何处理跨域？

接下来小本本准备好哦！
什么是跨域：
跨域产生在发送请求时，当请求服务器和响应服务器不是同一台时，就会产生跨域
非同源的服务器互相访问时，就会产生跨域
浏览器为了数据安全，给XMLHTTPRequest施加了安全限制，只允许页面请求自己服务器的数据

同源：
协议://ip：端口
三者都相同时，就会同源，不会有跨域问题

跨域的解决方案：

1. （主流）vue proxy 代理	
	1. 选择已有或者新建vue.config.js
	2. 根据API接口有几台服务器来决定使用方式
		方式1： 默认代理所有接口，适用于后端API接口只有一台的情况
		devServer: {
			proxy: 'http://16.222.11.186:443'
		}
		//发送时，不论任何请求工具，只需写接口地址即可，proxy会把所有接口转发到当前服务器
		axios.post('/a') ==> http://16.222.11.186:44/a
		
		方式2： 如果有请求>=2台服务器的情况（多代理分发模式）
		devServer: {
			proxy: {
				'/key1': {
					target: 'http://localhost:3333',	//目标接口服务器
					ws: true | false,	//是否是webscoket代理 true是 false不是
					changeOrigin: true,  //是否跨域 true
					pathRewrite: {
						'^/key1': ''		//请求路径修改,把区分服务器的key删掉
					}
				},
				'/key2': {
					target: 'http://www.taobao.com'	
					changeOrigin: true,
					pathRewrite: {
						'^/key2': ''
					}
				},
				...
			}
		}
		//请求方式
		axios.get('/key1/login') ==> http://localhost:3333/login
		axios.get('/key2/req/map') ==> http://www.taobao.com/req/map
		
	
此方式只需要vue服务器配置完即可实现跨域，服务器不需要设置

2. （主流）后端设置允许请求头（让服务器来解决）
	（工程师设置自己服务器可允许访问的ip）

3. jsonp（由前端来解决 很古老的一种解决方案）
	原理： 利用html标签的开源策略
		   使用script标签去发送请求
	早期原生js和jquery解决跨域的方法
	
	//这里只是jsonp的发送，怎么收服务器接口响应的值呢？

	<script src='http://服务器ip:端口/接口?callback=函数'></script>
	//接收
	函数（res）{
	
	}

	标签请求和ajax请求是不一样的，所以后端也要单独处理

这里推荐一些前端不同的面试题：
http://www.gtalent.cn/exam/interview/ISY5HtbC8uAXV39l

http://www.gtalent.cn/exam/interview/uQDdTj9LUnSWeXtP