完全弄懂跨域题目

2019年8月20日 147次阅读来源: 心难收

跨域，陈词滥调的题目

简述

作为一只前端菜鸟，跨域方面只懂得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与父页面互相接见也受同源战略限定，所以要借助一代办页面完成跨域。

《完全弄懂跨域题目》

个人认为有些贫苦，若有兴致请看前端怎样用代办页面处理iframe跨域接见的题目？

总结

以上几种皆是本人用过或测试过的跨域要领，另有postMessage，WebSocket等跨域要领因为从未打仗不做申明。在项目中详细运用那些要领还需详细斟酌种种题目

状况	要领
只要GET请求	JSONP
对兼容性及浏览器版本无请求	CORS
对兼容性及浏览器版本有请求	iframe 或服务器反向代办(linux 环境下开辟)

本文参考

感谢

本文若有毛病，迎接指出
本人邮箱 xbc18304999858@gmail.com

    原文作者：心难收
    原文地址: https://segmentfault.com/a/1190000017867312
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。