跨域的几种方式

作者: 向前冲冲的蜗牛 | 来源:发表于2017-10-07 00:24 被阅读0次

Ajax 请求和跨域
#hello，JS：15 同源策略 & 跨域(JSONP)
跨域问题
JavaScript 九种跨域方式实现原理
JavaScript 九种跨域方式实现原理
JavaScript 九种跨域方式实现原理【转】
九种跨域方式实现原理（完整版）
常见前端开发面试题（http部分）
九种跨域方式实现原理
跨域

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

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

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

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