彻底弄懂跨域问题

rose 发布于2019-07-25 14:36 / 2447人阅读

摘要：用于告知浏览器可以将预先检查请求返回结果缓存的时间，在缓存有效期内，浏览器会使用缓存的预先检查结果判断是否发送跨域请求。

跨域，老生常谈的问题 简述

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

浏览器同源策略

nodejs

iframe

docker, nginx

我们为何要研究跨域问题

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

多种跨域方法

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

前后端分离时，前端为了获取后端数据而跨域

为不同域下的前端页面通信而跨域

为前后端分离而跨域 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中的

后端代码(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既是利用了，那么就只能支持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 域代码如下





A 域


server A

b 域代码





New ThinkJS Application


  server 2

注意

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

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

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

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

总结

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

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

本文参考

经验跨域方案

CORS——跨域请求那些事儿

前端如何用代理页面解决iframe跨域访问的问题？

前端常见的跨域解决方案(全)

CORS与服务器反向代理的优劣对比

图解正向代理、反向代理、透明代理

谢谢

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

idc机房托管超融合服务器跨域问题 cdn跨域问题 javascript跨域问题 js跨域问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40283.html

彻底弄懂跨域问题

摘要：浏览器同源策略我们为何要研究跨域问题因为浏览器的同源策略规定某域下的客户端在没明确授权的情况下，不能读写另一个域的资源。跨域，老生常谈的问题简述作为一只前端菜鸟，跨域方面只懂得JSONP和CORS，并未曾深入了解。但随着春招越来越近，就算是菜鸟也要猛振翅膀。近几日仔细研究了跨域问题，写下这篇文章，希望对开发者们有所帮助。在读本文前，希望您对以下知识略有了解。浏览器同源策略 n...

CoorChice 2019-08-23 14:41 评论0 收藏0
彻底弄懂session，cookie，token

摘要：分布式情况下的和我们已经知道时有状态的，一般存于服务器内存或硬盘中，当服务器采用分布式或集群时，就会面对负载均衡问题。负载均衡多服务器的情况，不好确认当前用户是否登录，因为多服务器不共享。 session，cookie和token究竟是什么简述我在写之前看了很多篇session，cookie的文章，有的人说先有了cookie，后有了session。也有人说先有session，后有c...

garfileo 2019-07-16 16:38 评论0 收藏0
一篇文章搞明白CORS跨域

摘要：跨域实在是面试官一个人的利器。首先，什么是是一个标准，全称是跨域资源共享。它的值是一个布尔值，表示是否允许发送。设为，即表示服务器明确许可，可以包含在请求中，一起发给服务器。面试问到数据交互的时候，经常会问跨域如何处理。大部分人都会回答JSONP，然后面试官紧接着就会问：JSONP缺点是什么啊？这个时候坑就来了，如果面试者说它支持GET方式，然后面试官就会追问，那如果POST方式发送...

tanglijun 2019-08-23 13:42 评论0 收藏0
前端经典文章

摘要：上周末看这篇文章时，偶有灵光，所以，分享出来给大家一起看看前端面试四月二十家前端面试题分享请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。前端切图神器 avocode 有了这个神器，切图再也腰不酸，腿不疼了。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，...

lowett 2019-08-22 13:58 评论0 收藏0
彻底弄懂JS中闭包

闭包概念: 　　闭包就是有权访问另一个函数作用域中变量的函数. 分析这句话: 　　1.闭包是定义在函数中的函数.　　2.闭包能访问包含函数的变量.　　3.即使包含函数执行完了, 被闭包引用的变量也得不到释放. 例子分析-1: function add(){ var i = 0 arr = []; ...

DevYK 2019-08-20 15:10 评论0 收藏0