跨域 #CORS方式 #JSONP #HTTP代理

一个网站内的网页，去请求并使用了另一个域名下的网站的资源

比如: 
	<link rel="stylesheet" href="别人网站的css">
	<script src="别人网站的js">
	<img src="别人网站的图片">
	<iframe src="别人网站的网页">

包括: 
	(1). 域名不同: 
	http://www.a.com/网页 ->  http://www.b.com/资源
	(2). 子级域名不同: 
	http://hr.tedu.com/网页 ->  http://oa.tedu.com/资源
	(3). 端口号不同: 
	http://localhost:5500/网页 ->  http://localhost:3000/资源
	(4). 协议不同: 
	http://12306.cn/网页 -> https://12306.cn/资源
	(5). 即使同一台机器，IP与域名之间互访也算跨域
	http://localhost/网页 -> http://127.0.0.1/资源

浏览器允许除xhr对象之外的一切其他手段，发送跨域请求，接收其他网站的资源。唯独禁止xhr对象发送跨域的ajax请求！

报错：Access to XMLHttpRequest at 'http://localhost:3000/' 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. 😁 😁 翻译: 从http://127.0.0.1:5500 到 http://localhost:3000的XMLHttpRequest请求，已经被CORS策略拦截：在请求回来的资源上，没有设置'Access-Control-Allow-Origin'请求头属性

cors策略：浏览器会检查网页请求回来的所有数据,其会检查ajax的xhr请求回来的数据,浏览器只允许来源地址和当前网页所在地址属于同一域名下的数据，进入程序中使用。一旦发现，请求回来的数据来源地址，与当前网页所在地址不一致，则浏览器禁止使用该数据。——同源策略(Cross Origin Resoures Sharing)

解决

1.CORS方式：请服务器端根据客户端的需要篡改响应结果寄件人的地址,如客户端保持一直
	a.请服务器端根据客户端的需要篡改响应结果的寄件人地址，与客户端地址保持一致
	b. res.writeHead(200,{
		"Access-Control-Allow-Origin":"http://客户端地址:端口号",
		... : ...
	})

//示例：服务器端
const http=require("http");
http.createServer((req,res)=>{
  var weather="北京 小雨 26~19";
  res.writeHead(200,{
    "Content-Type":"text/plain;charset=utf-8",
    //请服务器端篡改响应结果中的"寄件人地址"与客户端地址保持一致！
    'Access-Control-Allow-Origin':"http://127.0.0.1:5500"
  });
  res.write(weather);
  res.end();
}).listen(3000)

//示例：客户端
<script>
    $.ajax({
      url:"http://localhost:3000",
      type:"get",
      success:function(result){
        document.write(`<h1>${result}</h1>`)
      }
    })
 </script>

问题: 如果不同域名地址的多个客户端网页都需要访问同一个服务器端。如何篡改寄件人？
解决: 其实: "Access-Control-Allow-Origin": "*"
问题: 如果用*，意为着所有客户端可以不加限制的访问服务器端接口数据，不安全。

2.JSONP：将服务器端要返回的结果，填充进一条可执行的js语句中返回。客户端，不要用ajax发送请求，而用<script>发送请求
  
  如何: 
		1). 客户端不要用任何ajax方式发送请求，改为用<script src="接口地址">方式发送请求——<script>是允许跨域请求的！
		2). 服务器端将要返回的数据，拼接在一条可执行的js语句中，返回一条可执行的js语句

  原理: 
		1). <script src="">向服务器发送请求
		2). 服务器返回一条包含数据的可执行的js语句
		3). <script>收到可执行的js语句后，立刻自动执行语句。

问题: 要执行的js语句是在服务器端写死的，很可能客户端需要的是不同的操作
	c. 解决: 
		1). 客户端先在本地定义一个带形参的函数，用来等待将来处理服务器端返回的结果
		2). 服务器端返回一条以客户端函数命名的函数调用语句，其中包含要返回的数据作为参数。
	d. 原理: 
		1). 服务器端返回以客户端函数命名的函数调用语句
		2). <script>接到之后，立刻调用这条语句
		3). 刚好客户端内存中之前提前定义了一个同名的js函数，就相当于自动调用该函数执行操作了！
 
 问题: 函数名是在服务器端写死的，万一修改客户端函数名，服务器端也被迫要同时修改函数名——紧耦合
	f. 解决: 
		1). 客户端在使用<script src="">发送请求时，携带一个提前商量好的参数名和参数值。其中参数值就是客户端本地的函数名		2). 服务器端在接到客户端发来的函数名时，用客户端发来的函数名拼接成一条可执行的函数调用语句，再返回。

示例：服务
const http=require("http");
http.createServer((req,res)=>{
    var weather="雨  15~23";
    res.writeHead(200,{
        "Content-Type":"text/html;charset=utf-8"
    })
    var str=`doit("${weather}")`
    res.write(str)
    res.end()
}).listen(3000)

示例：客户
  <script>
    function doit (data){
       alert(data)
    }
  </script>
    <script src="http://127.0.0.1:3000?callback=doit"></script>

3. http代理/服务器中继: （待续...）