最新公告
  • 欢迎您访问爱上源码网,分享精品整站源码,网站模板,游戏源码,APP小程序源码以及视频教程免费下载;服务永无止境!立即加入我们
  • 跨域问题的超详细全解(附示例)

    本篇文章给大家带来的内容是关于跨域问题的超详细全解(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    跨域,老生常谈的问题

    简述

    作为一只前端菜鸟,跨域方面只懂得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用于在预先请求时,告知服务器要发起的跨域请求中会携带的请求头信息

    响应头主要包括

    响应头 解释
    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是这样的

    爱上源码网文章跨域问题的超详细全解(附示例)的内容插图

    前端页面是这样的

    爱上源码网文章跨域问题的超详细全解(附示例)的内容插图1

    注意

    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与父页面相互访问也受同源策略限制,所以要借助一代理页面实现跨域。

    爱上源码网文章跨域问题的超详细全解(附示例)的内容插图2

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

    总结

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

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

    以上就是跨域问题的超详细全解(附示例)的详细内容,更多请关注爱上源码网其它相关文章!

  • 微信
  • 分享
  • 相关标签:javascript nginx 跨域 node.js
  • 本文转载于:segmentfault,如有侵犯,请联系916990011@qq.com删除
    • 上一篇:es6字符串中新增知识介绍(代码示例)
    • 下一篇:如何使用require读取模块化的JavaScript文件

    相关文章

    相关视频

    • jQuery.form插件的使用及跨域异步上传文件…
    • javascript跨域总结之window.nam…
    • js实现跨域的4种实用方法原理分析_javascr…
    • javascript跨域的方法汇总_javascr…
    • javascript跨域方法、原理以及出现问题解决…
    • jquery+ajax实现跨域请求的方法_jque…
    • 跨域问题的超详细全解(附示例)
    • 解决Ajax中文乱码与跨域访问
    • ajax跨域的问题和处理
    • 解决Ajax中文乱码与跨域访问
    • jsonp跨域请求
    • ajax跨域

    本文有爱上源码下载完入驻作者发布,如果对您版权造成侵害,可以联系本站站长管理进行维权删除,本站收到维权24小时内进行处理,谢谢您关注23ym.cn!
    本站分享大量程序员技术文章以及对编程开发的初级入门教程,包括图文讲解笔记和高清视频下载~

    重要声明:
    1.本站视频教程,软件及网站源码版权均属于原作者所有,您必须在下载后的24个小时之内,从您的电脑中删除!非法商业用途,后果自负!
    2.本站不保证所提供下载资源的安全性和完整性,仅供下载学习之用!如链接失效或资源含外站广告,请联系客服处理!给予奖励!
    3.本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!本站提供有偿服务!如有侵权请联系在线客服!
    4.如您手中有优质资源或教程,可以自助投稿发布,成功分享后有奖励和额外收入!
    5.如您需要正版微擎模块可联系本站客服,我们有价值30w+商业微擎应用出售微擎坑位和招收代理!
    6.400电话/软著/ICP,EDI许可证/商标特价办理中!
    爱上源码下载网 » 跨域问题的超详细全解(附示例)

    常见问题FAQ

    从网站下载的源码都有安装教程么?不会安装怎么办?
    本站发布的网站源码和模板资源大部分在压缩包内都有教程,如您不会安装可以联系本站在线技术进行付费安装。
    爱上源码的所有源码都是亲测能正常运行的么?
    本站目前拥有资源10w+,包含整站源码,网站模板,游戏源码,小程序源码,视频教程,破解软件等,每天也在测试更新;因时间和精力有限我们无法对资源进行一一测试,只能保证所分享资源内容无误,希望理解。
    我手中的优质资源可以在你这换钱或者VIP么?
    爱上源码支持投稿,欢迎发布您手中的优质资源进行售卖;本站VIP支持免费获取,目前邀请10人注册爱上源码即可免费获取VIP。
    爱上源码除了资源分享还有其他业务没?
    【价值30W+微擎模块出售正版商业微擎坑位及招收代理,详情咨询本站客服!】我们团队目前运营并推广几套商业化saas智能小程序系统能满足大部分小程序开发需求,并由SaaS和独立部署版商城小程序系统;另外销售400电话,各种ICP/EDI资质证书办理,软著和商标注册服务等。

    发表评论

    • 28会员总数(位)
    • 35644资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 543稳定运行(天)

    提供最优质的资源集合

    开通VIP 源码下载