跨域原理以及跨域解决方案

2017-10-15 本文已影响556人胡哥有话说

写在前面的话

在火热的互联网IT时代，越来越多的前端开发工程师和H5开发工程师都会遭遇到人(猿)生中一个名词：跨域，尤其是新手第一次接触这个东西时，顿感手足无措。本篇文章将会对跨域从基本概念到详细应用进行一一解读，废话不多，直接走起....

跨域到底是什么？

先上张图，给各位压压惊...

跨域错误提示信息

是不是又看到了熟悉的 No 'Access-Control-Allow-Origin' (这是跨域的经典标志), 惊不惊喜，意不意外，是不是很熟悉！

认识URL网址

URL地址： http://www.justbecoder.com:80/article/index.html
    http                                  超文本传输协议
    www.justbecoder.com                   域名
    80                                    端口号
    article/index.html                    文件目录与文件名

同源策略

概念

同源策略是浏览器最核心也是最基本的的安全功能，是指我们在发送网络请求时请求必须要遵守同源策略，即域名、协议、端口号都要相同

意义

是为了保证用户信息的安全，防止恶意的网站窃取数据。

触发跨域的场景以及原因

当同源策略中的域名、协议、端口号有一样不相同时，都会触发跨域

假定当前在的网址是： http://www.justbecoder.com:80/，当我向以下网址发送请求时都会触发跨域
    url: https://www.justbecoder.com:80/   // 协议不同 --- 喂，老婆，我听不懂呀，你说话加密啦！
    url: http://www.baidu.com:80/          // 域名不同 --- 哎呀，菇凉认错认了，你不是我老婆
    url: http://www.justbecoder.com:8080/  // 端口不同 --- 是你老婆没错，但是你没有找对你老婆身上的门啊

我们必须是用跨域吗?

现在网站的功能越来越多，网站中的图片、视频、数据库有可能都不在同一台服务器上，不同协议、不同域名、不同端口号的服务器进行相互请求和响应是必然的，所以跨域一定是会使用到的！

如何应用和解决跨域

问题场景：

// 客户端  跨域请求 --- 所在位置 http://localhost:80/index.js
$.ajax({
    // 端口号不同，引发跨域
    url: 'http://localhost:3000/user/info',
    type: 'get',
    data: {
        id: 110
    },
    success: function(msg) {
        console.log(msg)
    },
    error: function(err) {
        console.log(err)
    }
})  

// 服务器端响应 --- 以Node.js为例,服务器位置http://localhost:3000
var express = require('express');
var router = express.Router();

router.get('/user/info', function(req, res) {
    // 获取请求的参数
    // req.query.id // 当然这个参数目前是没有用滴...
    // ... 查询数据库中对应的用户info,假定当前获取的数据为
    var userInfo = {
        id: 110,
        username: '天王盖地虎',
        userimg: '/uploads/user/23456.jpg'
    };
    // 响应给客户端
    res.send(200, userInfo);
})

问题信息：

当请求按照上面的代码进行发送和响应时，会触发跨域错误，因为二者的端口号是不一致的，没有遵循同源策略

JSONP跨域请求解决方案：

这里是重点，重点(敲黑板...),在使用script标签引入js文件时是不受同源策略影响的，so我们就可以拿这个做文章了

// 当我们向某个位置发送请求时，请求和响应要做出如下改变
客户端请求：
    <script src="http://localhost:3000/user/info?id=110" type="text/javascript"></script>
服务器端响应：
    var userInfo = {
        id: 110,
        username: '天王盖地虎',
        userimg: '/uploads/user/23456.jpg'
    };
    
    // 序列化 -- 格式 {"id":110,"username":"天王盖地虎","userimg":"/uploads/user/23456.jpg"}
    var userInfoJsonStr = JSON. stringify(userInfo);
    
    // 格式 -- 'getInfo({"id":110,"username":"天王盖地虎","userimg":"/uploads/user/23456.jpg"})'
    res.send(200, 'getInfo('+userInfoJsonStr+')'); 

客户端接收数据
    // 响应到的数据(浏览器 Network自行查看)，该格式下的字符串，相当于在调用一个名字为 getInfo 的函数，传递的参数为 {"id":110,"username":"天王盖地虎","userimg":"/uploads/user/23456.jpg"}
    // getInfo({"id":110,"username":"天王盖地虎","userimg":"/uploads/user/23456.jpg"})
    
    在客户端的JS脚本中，定义对应的函数 getInfo()
    <script type="text/javascript">
        function getInfo(msg) {
            // 此处的msg就是获取响应的userInfo
            // 接下来你想干啥就干啥
        }
    </script>

以上的这个过程，我们就解决了跨域的问题。

JSONP跨域请求原理

创建script标签，将原有的url地址、参数数据设置为src的地址，并附加参数（包括约定的callback函数名）

 var script = document.createElement('script');
 script.src = 'http://localhost:3000/user/info?callback=getInfo&id=110';
 document.body.appendChild(script);

服务器端响应数据时，要将响应的数据设置为指定的格式接收的函数名(JSON字符串格式数据)

 // 获取客户端约定的回调函数名
 var callback = req.query.callback;
 var userInfo = JSON.stringify({
     id: 110,
     username: '天王盖地虎',
     userimg: '/uploads/user/23456.jpg'
 });
 res.send(200, callback + '(' + userInfo + ')');

在客户端定义对应的函数名的函数，该函数的形参就是接收到的服务器端响应数据

 <script>
     function getInfo(msg) {
         // msg 服务器端的响应数据
         console.log(msg)
     }
 </script>

jQuery封装的JSONP请求

$.ajax({
    // 请求的url地址
    url: 'http://localhost:3000/user/info',
    // 发送数据方式
    type: 'get',
    // 参数
    data: {
        id: 110
    },
    // 请求成功时的callback
    success: function(msg) {
        // 你想干啥就干啥
    },
    // 预期服务器返回的数据类型
    dataType: 'jsonp',
    // 指定定义回调函数名的参数名,若不指定默认参数名为callback
    jsonp: 'callback',
    // 指定回调函数名,若不指定默认为系统自动生成
    // jsonpCallback: 'getInfo'
})

结语

以上是我整理的关于跨域的原理以及相应的JSONP跨域解决方案，希望能够给各位小伙伴在工作和学习中提供一定的帮助。欢迎小伙伴积极留言探讨，不要忘记收藏和点赞喜欢呦，还可以进行打赏，请哥喝杯咖啡呀。