彻底弄懂跨域问题

头像
心难收
    阅读 7 分钟
    34

    跨域，老生常谈的问题

    简述

    作为一只前端菜鸟，跨域方面只懂得JSONP和CORS，并未曾深入了解。但随着春招越来越近，就算是菜鸟也要猛振翅膀。近几日仔细研究了跨域问题，写下这篇文章，希望对开发者们有所帮助。在读本文前，希望您对以下知识略有了解。

    • 浏览器同源策略
    • nodejs
    • iframe
    • docker, nginx

    我们为何要研究跨域问题

    因为浏览器的同源策略规定某域下的客户端在没明确授权的情况下，不能读写另一个域的资源。而在实际开发中，前后端常常是相互分离的，并且前后端的项目部署也常常不在一个服务器内或者在一个服务器的不同端口下。前端想要获取后端的数据，就必须发起请求，如果不做一些处理，就会受到浏览器同源策略的约束。后端可以收到请求并返回数据，但是前端无法收到数据。

    为何浏览器会制定同源策略

    之所以有同源策略，其中一个重要原因就是对cookie的保护。cookie 中存着sessionID 。黑客一旦获取了sessionID，并且在有效期内，就可以登录。当我们访问了一个恶意网站 如果没有同源策略 那么这个网站就能通过js 访问document.cookie 得到用户关于的各个网站的sessionID 其中可能有银行网站 等等。通过已经建立好的session连接进行攻击，比如CSRF攻击。
    这里需要服务端配合再举个例子，现在我扮演坏人 我通过一个iframe 加载某宝的登录页面 等傻傻的用户登录我的网站的时候 我就把这个页面弹出 用户一看 阿里唉大公司 肯定安全 就屁颠屁颠的输入了密码 注意 如果没有同源策略 我这个恶意网站就能通过dom操作获取到用户输入的值 从而控制该账户所以同源策略是绝对必要的.
    还有需要注意的是同源策略无法完全防御CSRF。

    多种跨域方法

    跨域可以大概分为两种目的

    • 前后端分离时，前端为了获取后端数据而跨域
    • 为不同域下的前端页面通信而跨域

    为前后端分离而跨域

    Cross Origin Resource Share (CORS)

    CORS是一个跨域资源共享方案，为了解决跨域问题，通过增加一系列请求头和响应头，规范安全地进行跨站数据传输

    请求头主要包括
    请求头 解释
    Origin Origin头在跨域请求或预先请求中，标明发起跨域请求的源域名。
    Access-Control-Request-Method Access-Control-Request-Method头用于表明跨域请求使用的实际HTTP方法
    Access-Control-Request-Headers Access-Control-Request-Headers用于在预先请求时，告知服务器要发起的跨域请求中会携带的请求头信息
    with-credentials 跨域请求携带cookie
    响应头主要包括
    响应头 解释
    Access-Control-Allow-Origin Access-Control-Allow-Origin头中携带了服务器端验证后的允许的跨域请求域名，可以是一个具体的域名或是一个*（表示任意域名）。
    Access-Control-Expose-Headers Access-Control-Expose-Headers头用于允许返回给跨域请求的响应头列表，在列表中的响应头的内容，才可以被浏览器访问。
    Access-Control-Max-Age Access-Control-Max-Age用于告知浏览器可以将预先检查请求返回结果缓存的时间，在缓存有效期内，浏览器会使用缓存的预先检查结果判断是否发送跨域请求。
    Access-Control-Allow-Methods Access-Control-Allow-Methods用于告知浏览器可以在实际发送跨域请求时，可以支持的请求方法，可以是一个具体的方法列表或是一个*（表示任意方法）。
    如何使用
    • 客户端只需按规范设置请求头。
    • 服务端按规范识别并返回对应响应头，或者安装相应插件，修改相应框架配置文件等。具体视服务端所用的语言和框架而定
    SpringBoot 设置CORS例子

    一个spring boot项目中关于CORS配置的一段代码

    HttpServletResponse httpServletResponse = (HttpServletResponse) response;
        String temp = request.getHeader("Origin");
        httpServletResponse.setHeader("Access-Control-Allow-Origin", temp);
        // 允许的访问方法
        httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");
//         Access-Control-Max-Age 用于 CORS 相关配置的缓存
        httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
        httpServletResponse.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept,token");
        httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");

    JSONP 跨域

    jsonp的原理就是借助HTML中的<script>标签可以跨域引入资源。所以动态创建一个<srcipt>标签，src为目的接口 + get数据包 + 处理数据的函数名。后台收到GET请求后解析并返回函数名(数据)给前端，前端<script>标签动态执行处理函数
    观察下面代码

    • 前端代码

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参并指定回调执行函数为getData
    script.src = 'http://localhost:8080/users?username=xbc&callback=handleData';
    document.body.appendChild(script);
    // 回调执行函数
    function handleData(res) {
        data = JSON.stringify(res)
        console.log(data);
    }
</script>
</body>
</html>

    • 后端代码(nodejs)

      var querystring = require('querystring');
var http = require('http');
var server = http.createServer();

server.on('request', function(req, res) {
    var params = querystring.parse(req.url.split('?')[1]);
    var fn = params.callback;

    // jsonp返回设置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    var data = {
        user: 'xbc',
        password: '123456'
    }
    res.write(fn + '(' + JSON.stringify(data) + ')');

    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

    在该例子中，前台收到的res是这样的
    图片描述

    前端页面是这样的
    图片描述

    注意

    JSONP既是利用了<srcipt>，那么就只能支持GET请求。其他请求无法实现

    nginx 反向代理实现跨域

    思路

    既然浏览器有同源策略限制，那我们把前端项目和前端要请求的api接口地址放在同源下不就可以了？再结合web服务器提供的反向代理，便可以在前端和后端都不做配置的情况下解决跨域问题。

    以nginx为例
    • 后端真实后台地址：http://xxx.xxx.xxx.xxx:8085 后台地址使用tomcat部署的spring boot项目 名为gsms_test
    • nginx服务器地址: http://xxx.xxx.xxx.xxx:8082
    • tomcat和nginx都是用docker架设的，做了端口转发
    • 使用条件：开发环境为linux系统

    • nginx /etc/nginx/conf.d/default.conf配置代码如下

      server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        # root   /usr/share/nginx/html/dist; # 前端项目路径
        # index  index.html index.htm;
        proxy_pass http://localhost:8001/; # 前端本机地址，实现自动更新
        autoindex on;
        autoindex_exact_size on;
        autoindex_localtime on;
    }

    location /gsms_test/ {
        proxy_pass 后端真实地址;
    }

    

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

    不同域下页面通信而跨域

    window.name + iframe 跨域

    window.name是浏览器中一个窗口所共享的数据，在不同的页面（甚至不同域名）加载后依旧存在（如果没修改则值不会变化），并且可以支持非常长的 name 值（2MB）。比如 a域的某页面想获取b域某页面的数据，可以在b域中修改window.name值，a域切换到b域再切回来即可得到b域的window.name值。可是我们在开发中肯定不想页面切来切去，所以就要结合iframe来实现。

    示例 (以thinkjs实现)

    • a 域代码如下

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A 域</title>
</head>
<body>
<h1>server A</h1>
<script type="text/javascript">
    function getData() {
        var iframe = document.getElementById('proxy');
        iframe.onload = function () {
            var name = iframe.contentWindow.name; // 获取iframe窗口里的window.name值
            console.log(name)
        }
        // 由于iframe信息传递也受同源策略限制，所以在window.name被B域修改后，将iframe转回A域下。以便获取iframe的window.name值
        iframe.src = 'http://127.0.0.1:8360/sub.html' 
    }
</script>
<iframe id="proxy" src="http://127.0.0.1:8361/index.html" style="width: 100%" onload="getData()">        </iframe>
</body>
</html>

    • b 域代码

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>New ThinkJS Application</title>
</head>
<body>
  <h1>server 2</h1>
<script type="text/javascript">
  window.name = 'user: xbc';
</script>
</body>
</html>
    注意

    由于受同源策略限制，父页面获取跨域的iframe页面的信息不全，所以要在iframe的window.name被B域修改后，转为A域下的任一页面(该一面不得修改window.name)，在进行获取。

    代理页面 + iframe 实现跨域访问

    由于iframe与父页面相互访问也受同源策略限制，所以要借助一代理页面实现跨域。

    图片来源于https://www.jianshu.com/p/9d90d3333215

    个人认为有些麻烦，若有兴趣请看前端如何用代理页面解决iframe跨域访问的问题？

    总结

    以上几种皆是本人用过或测试过的跨域方法，还有postMessage，WebSocket等跨域方法由于从未接触不做说明。在项目中具体使用那些方法还需具体考虑各种问题

    情况 方法
    只有GET请求 JSONP
    对兼容性及浏览器版本无要求 CORS
    对兼容性及浏览器版本有要求 iframe 或 服务器反向代理(linux 环境下开发)

    本文参考

    谢谢

    本文如有错误，欢迎指出
    本人邮箱 xbc18304999858@gmail.com

    node.js跨域nginxjavascript
    心难收
    717 声望32 粉丝
    « 上一篇
    sessionStorage和localStorage
    下一篇 »
    JavaScript原型与构造函数笔记

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    CSS的BEM规范学习笔记

    心难收赞 3阅读 2.6k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新