83-84：几种常用的跨域解决方案

跨域问题的产生及其价值意义
 JSONP跨域解决方案的底层原理
 CORS跨域资源共享
 基于http proxy实现跨域请求
 基于post message实现跨域处理
 基于iframe的跨域解决方案：
window.name / document.domin / location.hash


当前页面请求地址：http://127.0.0.1:5500/1.html (live server插件)
axios.get(‘http://127.0.0.1:1001/test’).then(result => {
console.log(result);
});
跨域请求错误：Access to XMLHttpRequest at ‘http://127.0.0.1:1001/test’ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 为了保证请求的安全，ajax请求默认是不允许跨域的

跨域请求的处理方案
很早有这样一种方案（开发环境下）：
=>项目部署的时候肯定会在一起（项目一旦部署不存在跨域访问），但是在开发的时候，开发者需要让本地的项目也能访问到正常的数据接口
1）最开始需要前端开发把后台代码也在本地部署起来，和本地的WEB部署在一起，在本地也产生同源的环境 =>BUG：需要前端随时同步后台的代码到本地，而且本地也要安装一些后太的环境
2）本地无需拿后台代码等，本地启动一个WEB服务，通过修改本地的HOST文件，模拟出和数据服务器相同的环境 xampp / wampp
* 1. JSONP
* 2. 其它一些方案（IFRAME）
* + window.name
* + window.location.hash
* + document.domain 处理主域相同，子域不同的相互请求
* + postMessage
3. CORS 跨域资源共享
* 原理：让服务器端允许客户端跨域AJAX请求（基本上靠服务端设置允许跨域，客户端无需做太多的修改，直接正常发送AJAX请求即可）
4. webpack的崛起，带动了http proxy这种方案的兴起
原理：利用webpack-dev-server插件，构建本地服务AA（预览本地开发的项目），我们发送AJAX请求，都先把请求发送给AA，有AA帮我们在发送给真正的服务器，AA起了一个中间代理的作用，从而解决跨域的问题！
* 但是上述操作是基于AA这个服务的（webpack-dev-server），项目最后部署的时候，没有webpack-dev-server插件，此时我们需要基于其它方案（例如：nginx反向代理）实现出当初AA服务代理的作用才可以！
* + nginx反向代理
* 5. web scoket
*/

api.xxx.com/user/list
api.xxx.com/index.html => http://127.0.0.1:5500/index.html
[HOST]
api.xxx.com http://127.0.0.1:5500/

jsonp方法

<script>
		/*
		 * JSONP：利用了SCRIPT（IMG/IFRAME）等标签不存在跨域请求限制的特点，实现跨域请求的 
		 *   只能是GET请求（不能处理POST请求）
		 *   =>传递给服务器的信息都是基于问号传参的方式传递过去的
		 *   =>为了能够拿到服务器返回的结果，需要利用回调函数的机制，把客户端的某个函数(全局)名传递给服务器，由服务器接收到函数后进行特出的处理  ?callback=func  （callback这个名字是和服务器商定好的，一般都叫callback这个名字）
		 */
 function func(result) {
   
			console.log(result);
		}

		let script = document.createElement('script');
		script.src = `http://127.0.0.1:1001/test?lx=