跨域的简介与解决方案

一、什么是同源？

同源是指域名、协议和端口均相同。

二、什么是跨域？

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源（只要域名、协议和端口有任一个不同，就被当作是跨域）

JavaScript 出于安全方面的考虑，不允许跨域调用其它页面的对象

几种常见场景：

• 不同文件：www.abc.com/index.html 调用 www.abc.com/service.php （非跨域）
• 不同域名：www.abc.com/index.html 调用 www.efg.com/service.php（跨域）
• 不同协议：http://www.abc.com/index.html 调用 https://www.abc.com/service.php（跨域）
• 不同端口：www.abc.com/index.html 调用 www.abc.com:81/service.php（跨域）

 

三、跨域解决方案

1、proxy（服务器代理）

A 客户端访问 A 服务器，并在 A 服务器上做代理访问 B 服务器，然后把请求结果返回 A 客户端，即实现了 A 客户端请求 B 服务器的跨域

2、CORS（跨域资源共享）

• 什么是 CORS

是 Cross-Origin Resource Sharing（跨域请求资源共享全称），是一种跨域资源请求机制

• CORS 的使用

需要被请求方的服务端设置： Access-Control-Allow-Origin

// 客户端
$.ajax({url:"http://127.0.0.1:1234/",success:function (data) {
    $("div").text(data)
}})

// 服务器
var http=require('http');
http.createServer(function (req,res) {
    res.setHeader("Access-Control-Allow-Origin","*");
    res.end("OK");
}).listen(1234);

3、JSONP

• 什么是 JSONP

全称是 JSON with padding（填充式 json），是应用 JSON 的一种新方法，也是一种跨域解决方案

• JSONP 的原理

所有具有 src 属性的 HTML 标签都是可以跨域的，包括 <script> <img> <iframe>，所以可以把一些资源放到第三方服务器上，然后可以通过对应标签的 src 属性引用

• JSONP 的使用

1. 首先在客户端注册一个 callback, 然后把 callback 的名字传给服务器。

2. 服务器先生成 json 数据。将 json 数据直接以入参的方式，放置到 callback 中，这样就生成了一段 js 语法的文档，返回给客户端。

3. 客户端浏览器，解析script标签，并执行返回的 javascript 代码，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

// 客户端
<script type="text/javascript">
      $.ajax({
          url:"http://127.0.0.1:1234/",
          dataType:"jsonp",
          jsonCallback:'abc',
          success:function (data) {
              console.log(data)
          }
      })
</script>

// 服务器
var http=require("http");
var urllib=require("url");
var data={"name":"111","addr":"222"};
http.createServer(function (req,res) {
    res.writeHead(200,{'Content-type':'text/plain'});
    var params=urllib.parse(req.url,true);
    if(params.query&&params.query.callback){
        console.log(params.query,params.query.callback)
        var str=params.query.callback+'('+JSON.stringify(data)+')';
        console.log(str)
        res.end(str);
    }else{
        res.end(JSON.stringify(data));
    }
}).listen(1234)

• JSONP 的缺点

只能实现 get 一种请求