跨域的几种方式

---

1： 什么是同源策略

同源策略是一种安全策略，所有的浏览器都实行这个政策。
例如：A网页设置的Cookie，B网页是不能打开的，除非这两个网页"同源"。同源的条件是：

协议相同 :比如都是httph或者都是https
域名相同 :比如都是http://google.com/a和http：//google.com/b
端口相同 :比如都是80端口

举例来说，http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下。
例如

http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）

本地搭建服务器，演示同源策略
修改本地host，通过不同的域名访问本地服务器

image.png

开启服务器端口(方法一)在git bash中输入 npm install http-server -g,就可以利用http-sever

image.png image.png image.png

开启服务器端口(方法二)
利用nodejs实现：
参照https://github.com/FrankFang/nodejs-test

关于同源策略更多参考：

http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

https://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

---

2： 什么是跨域？跨域有几种实现形式

跨域：当两个不满足同源策略的网站需要进行资源请求的时候，就发生了跨域请求，跨域的形式有：

• .JSONP
• .CORS
• .降域
• .postMessage
  

  ---

3： JSONP 的原理是什么

我们常常使用script标签从一个网站上引入一个js库，比如jquery库，但是同源策略却没有阻止我们访问库文件，从而说明了script标签可以跨域。

可以将script的scr属性看作一个get请求，这个请求可以带着参数。
jsonp的思路:

• 定义数据处理函数function a(data){....}
• 创建script标签，以及src的请求的地址及参数
• 服务器在收到请求后，解析参数，计算返回数据，输出a(data)字符串
• a(data)放在script标签后执行，因此会调用a函数，将data作为a的函数参数。
  代码如下（从前后端角度）：

//请求的网站：
btn.addEventListener('click',function(){
    //创建一个script标签
   var script=document.createElement('script);

    //设置script的scr的请求参数及地址
   script.src="http://weather.com:8888/getweather?callback=a";

     //将script添加到body中去
    document.body.appendchild(script);
},true)
    function a(data){ .....对data进行处理} 

//服务器端：
    
    app.get("/getweather",function(req,res){
      //获取request请求的参数callback的值
      var a=req.query.callback;
       if(a)
      {
       //将a（data）从服务器发送到浏览器端
       res.send(a+'('+JSON.stringify(data)+')');
       }
     else{
            res.send(data);
           }
})

另外简单的截图（借鉴）

image.png image.png

---

4： CORS是什么

CORSS是w3c标准，全称是"跨域资源共享"（cross-origin resource sharing）目前所有的浏览器都支持该功能，但是IE浏览器不能低于IE10.
实现CORS 通信的关键是服务器，只要服务器实现CORS 接口，就可以实现通信了。

image.png

浏览器将CORS请求分为两种请求
（4.1）简单请求：

• 1.1.请求类型为：head，get，post。
• 2.1.http的头部信息不超出这几个字段：
  accept，accept-language,last-event-
  id,content-type.
  一般的处理办法是服务器返回Access-Control-Origin+相同的信息源
  例子：比如网址为http://xll.com/bog/cors要向
  http://gody.com/bbs发送ajax请求，那么服务器（后端）只需在Access-Control-Origin头部发送相同信息源即可：

Access-Control-Allow-Origin:http://xll.com/bog/cors

（4.2）非简单请求：
比如：请求方法是：put或delete,或者Content-Type字段的类型是：application/json
处理办法是服务器在Access-Control-Origin头部发送相同信息源和'Access-Control-Allow-Methods 设置''PUT,OPTIONS'即可
例子：

//浏览器端通过ajax发送一个put请求
 xhr.open("PUT","http://b.jrg.com:90/qq_priv",true);

//浏览器端（nodejs）
 response.setHeader('Access-Control-Allow-Origin','*');
 response.setHeader('Access-Control-Allow-Methods ','PUT,OPTIONS');

具体cors用法理解参考
http://www.ruanyifeng.com/blog/2016/04/cors.html

---

5： 演示三种以上跨域的解决方式

降域

常常用于当一个网站拥有两个子网站，并且子网站的二级域名相同。
效果展示：
启动服务器 用的是

image.png ScreenGif.gif

cors

image.png image.png

JSONP

image.png image.png ScreenGif.gif

PostMessage

可以跨域，不需要像降域般用用一个基础域名

image.png

源代码地址如下：
https://github.com/HappyXll/WEB-KNOWLEDGE

---

6.总结对于跨域演示的时候，要特别注意取消代理

比如下面的这种情况：

image.png

解决办法就是：取消"代理服务器"，选中自动检测设置

image.png