网络请求技术--跨域

一、概念

跨域：

• 指浏览器不能执行其他网站的脚本 由浏览器的同源策略造成
• 是浏览器对javascript施加的安全限制 
• 浏览器为了保证用户的信息安全  在用Ajax进行网络请求时  若请求的网址和当前页面的网址不是同一台服务器就会被拒绝接受服务器发送的数据

注：跨域限制访问，其实是浏览器的限制

同源策略： 

• 是浏览器的一种安全策略
• 当且仅当 协议，域名（ip），端口（port）三者都相同时才能称为同源，否则产生跨域

示例：

同源 ==> pathname不参与同源判断

http://www.baidu.com/index.html

http://www.baidu.com/news/one.html

异源 ==> 协议不一样

http://www.baidu.com/index.html

https://www.baidu.com/news/one.html

异源 ==> 域名(ip:port)不一样

http://www.baidu.com/index.html

http://www.baidu.cn/news/one.html

同源 ==>  解析后相同

http://www.baidu.com/index.html     假设将域名解析为192.168.60.1:8080

http://192.168.60.1:8080/news/one.html

二、跨域问题

示例：

testqunar网站里的index.html文件想要请求qunar网站里的数据

请求结果如下：

三、解决跨域问题的方式

1）CORS

当一台服务器向另一台服务器发起网络请求出现跨域问题时在被请求的业务中添加发起请求的服务器的IP，这样浏览器就不会拦截数据，相当于让它进入白名单，实现跨域资源共享。

示例：

http://192.168.43.17:8081 服务器 想请求 http://192.168.60.172:8080 服务器的数据

对http://192.168.60.172:8080服务器：

res.setHeader("Access-Control-Allow-Origin","http://192.168.43.17:8081")
//在数据包的头部配置"Access-Control-Allow-Origin"字段后，数据包发送给浏览器后，浏览器就会根据这里配置的白名单“放行”
//允许白名单的服务器对应的网页来用ajax跨域访问

2）JSONP

用script标签的src属性请求跨域服务器的网址不会出现跨域问题,但是会直接把请求过来的编码用v8引擎去运行，所以在后端写一个js引擎能识别的字符串发送给前端如： ' fn({"name":"haha"}) '。

前端用script标签的src属性去请求这个网址,请求完毕以后v8就会直接运行这个编码去调用fn函数,所以必须提前创建这个函数。

前端可以通过querystring把函数名以参数的形式发送给后端，后端解析了以后直接拼接到数据中，解决函数名传递和重名问题。

示例：

Server2（8081）中的index.html去请求Server1（8080）中的数据

 请求结果如下：

3）Proxy

指代理软件或代理服务器，也可以认为是一种网络访问方式

Proxy 代理服务：后端合法的去请求别的后端(oAuth授权) 再发给前端 前端写成自己的页面

用request模块在后端请求数据然后传给自己的前端，前端请求自己的服务器就没有跨域 

 request模块：后端做网络请求

 request(url,(err,res,data)=>{console.log(data)})

回调有三个参数:第一个是错误信息，第二个是响应信息的集合，第三个是返回的信息

data返回的是json字符串，需要通过JSON.parse处理

示例：

后端请求百度的首页数据，请求到后直接返回给自己的前端，就可以直接得到一个跟百度首页一模一样的页面

var router=require("./router.js")
var request=require("request")  //是一个后端的网络请求工具 
router.get("/home",function(req,res){
   request("http://www.baidu.com/index.html",function(arg1,arg2,arg3){
    console.log(arg3)
    res.end(arg3)
   })

/*  
 前端请求后端  后端请求别的网页数据 然后修改了发给用户   （钓鱼网站）
              后端请求别的ajax网址数据 数据处理 发给用户（大数据分析）
              后端请求别的静态文件和数据 数据处理 发给用户 （爬虫）
              后端合法请求别的后端（oAuth授权--token） 再发给前端 前端写成自己的页面
*/
})

运行结果如下：