同域名不同端口下iframe跨域问题处理

场景描述,现有两个界面A和B,他们的IP和端口情况如下：

A : 192.168.1.2:8081
B : 192.168.1.2:8082

A界面中使用标签引入B界面。</p> <p>我们想在A界面来获取B界面中的元素时，在浏览器的console中就会提示cross….等字样的错误。</p> <h2 id="解决跨域问题"><a href="#解决跨域问题" class="headerlink" title="解决跨域问题"></a>解决跨域问题</h2><h3 id="1-使用设置请求头"><a href="#1-使用设置请求头" class="headerlink" title="1. 使用设置请求头"></a>1. 使用设置请求头</h3><p>response.setHeader();<br>response.setHeader();</p> <h3 id="2-使用domain"><a href="#2-使用domain" class="headerlink" title="2. 使用domain"></a>2. 使用domain</h3><h3 id="3-使用ngnix左请求转发"><a href="#3-使用ngnix左请求转发" class="headerlink" title="3. 使用ngnix左请求转发"></a>3. 使用ngnix左请求转发</h3><p>我使用了第三种方式来解决问题，让ngnix监听8083端口，分别将请求转发到A和B。这样就可以做到在访问A和B界面的时候，使用的都是同一个域名+端口。192.168.1.2：8083</p> </div> <hr/> <div> <div class="post-metas my-3"> <div class="post-meta mr-3 d-flex align-items-center"> <i class="iconfont icon-category"></i> <span class="category-chains"> <span class="category-chain"> <a href="/categories/%E5%85%B6%E4%BB%96/" class="category-chain-item">其他</a> </span> </span> </div> <div class="post-meta"> <i class="iconfont icon-tags"></i> <a href="/tags/%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93/">#问题总结</a> </div> </div> <div class="license-box my-3"> <div class="license-title"> <div>同域名不同端口下iframe跨域问题处理</div> <div>http://example.com/2018/03/15/2018-03-15-跨域-同域名不同端口下跨域问题处理/</div> </div> <div class="license-meta"> <div class="license-meta-item"> <div>Author</div> <div>Hoey</div> </div> <div class="license-meta-item license-meta-date"> <div>Posted on</div> <div>March 15, 2018</div> </div> <div class="license-meta-item"> <div>Licensed under</div> <div> <a target="_blank" href="https://creativecommons.org/licenses/by/4.0/"> <span class="hint--top hint--rounded" aria-label="BY - Hoey"> <i class="iconfont icon-by"></i> </span> </a> </div> </div> </div> <div class="license-icon iconfont"></div> </div> <div class="post-prevnext my-3"> <article class="post-prev col-6"> <a href="/2018/03/15/2018-03-15-mybatis-%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AD%97%E6%AE%B5%E5%92%8C%E5%AE%9E%E4%BD%93%E7%B1%BB%E5%AD%97%E6%AE%B5%E4%B8%8D%E4%B8%80%E8%87%B4%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/" title="mybatis数据库字段和实体类字段不一致解决方案"> <i class="iconfont icon-arrowleft"></i> <span class="hidden-mobile">mybatis数据库字段和实体类字段不一致解决方案</span> <span class="visible-mobile">Previous</span> </a> </article> <article class="post-next col-6"> <a href="/2018/03/13/2018-03-13-shiro-shiro%E5%AD%A6%E4%B9%A0/" title="shiro学习"> <span class="hidden-mobile">shiro学习</span> <span class="visible-mobile">Next</span> <i class="iconfont icon-arrowright"></i> </a> </article> </div> </div> </article> </div> </div> </div> <div class="side-col d-none d-lg-block col-lg-2"> <aside class="sidebar" style="margin-left: -1rem"> <div id="toc"> <p class="toc-header"><i class="iconfont icon-list"></i> Table of Contents</p> <div class="toc-body" id="toc-body"></div> </div> </aside> </div> </div> </div> <a id="scroll-top-button" aria-label="TOP" href="#" role="button"> <i class="iconfont icon-arrowup" aria-hidden="true"></i> </a> <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h4 class="modal-title w-100 font-weight-bold">Search</h4> <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body mx-3"> <div class="md-form mb-5"> <input type="text" id="local-search-input" class="form-control validate"> <label data-error="x" data-success="v" for="local-search-input">Keyword</label> </div> <div class="list-group" id="local-search-result"></div> </div> </div> </div> </div> </main> <footer> <div class="footer-inner"> <div class="footer-content"> <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> </div> </div> </footer>  <script src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script> <link rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" /> <script> NProgress.configure({"showSpinner":false,"trickleSpeed":100}) NProgress.start() window.addEventListener('load', function() { NProgress.done(); }) </script> <script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script> <script src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script> <script src="/js/events.js" ></script> <script src="/js/plugins.js" ></script> <script src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script> <script> (function (window, document) { var typing = Fluid.plugins.typing; var subtitle = document.getElementById('subtitle'); if (!subtitle || !typing) { return; } var text = subtitle.getAttribute('data-typed-text'); typing(text); })(window, document); </script> <script src="/js/img-lazyload.js" ></script> <script> Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() { var toc = jQuery('#toc'); if (toc.length === 0 || !window.tocbot) { return; } var boardCtn = jQuery('#board-ctn'); var boardTop = boardCtn.offset().top; window.tocbot.init({ tocSelector : '#toc-body', contentSelector : '.markdown-body', headingSelector : CONFIG.toc.headingSelector || 'h1,h2,h3,h4,h5,h6', linkClass : 'tocbot-link', activeLinkClass : 'tocbot-active-link', listClass : 'tocbot-list', isCollapsedClass: 'tocbot-is-collapsed', collapsibleClass: 'tocbot-is-collapsible', collapseDepth : CONFIG.toc.collapseDepth || 0, scrollSmooth : true, headingsOffset : -boardTop }); if (toc.find('.toc-list-item').length > 0) { toc.css('visibility', 'visible'); } }); </script> <script> (function() { var enableLang = CONFIG.code_language.enable && CONFIG.code_language.default; var enableCopy = CONFIG.copy_btn; if (!enableLang && !enableCopy) { return; } function getBgClass(ele) { return Fluid.utils.getBackgroundLightness(ele) >= 0 ? 'code-widget-light' : 'code-widget-dark'; } var copyTmpl = ''; copyTmpl += '<div class="code-widget">'; copyTmpl += 'LANG'; copyTmpl += '</div>'; jQuery('.markdown-body pre').each(function() { var $pre = jQuery(this); if ($pre.find('code.mermaid').length > 0) { return; } if ($pre.find('span.line').length > 0) { return; } var lang = ''; if (enableLang) { lang = CONFIG.code_language.default; if ($pre[0].children.length > 0 && $pre[0].children[0].classList.length >= 2 && $pre.children().hasClass('hljs')) { lang = $pre[0].children[0].classList[1]; } else if ($pre[0].getAttribute('data-language')) { lang = $pre[0].getAttribute('data-language'); } else if ($pre.parent().hasClass('sourceCode') && $pre[0].children.length > 0 && $pre[0].children[0].classList.length >= 2) { lang = $pre[0].children[0].classList[1]; $pre.parent().addClass('code-wrapper'); } else if ($pre.parent().hasClass('markdown-body') && $pre[0].classList.length === 0) { $pre.wrap('<div class="code-wrapper"></div>'); } lang = lang.toUpperCase().replace('NONE', CONFIG.code_language.default); } $pre.append(copyTmpl.replace('LANG', lang).replace('code-widget">', getBgClass($pre[0]) + (enableCopy ? ' code-widget copy-btn" data-clipboard-snippet><i class="iconfont icon-copy"></i>' : ' code-widget">'))); if (enableCopy) { Fluid.utils.createScript('https://lib.baomitu.com/clipboard.js/2.0.10/clipboard.min.js', function() { var clipboard = new window.ClipboardJS('.copy-btn', { target: function(trigger) { var nodes = trigger.parentNode.childNodes; for (var i = 0; i < nodes.length; i++) { if (nodes[i].tagName === 'CODE') { return nodes[i]; } } } }); clipboard.on('success', function(e) { e.clearSelection(); e.trigger.innerHTML = e.trigger.innerHTML.replace('icon-copy', 'icon-success'); setTimeout(function() { e.trigger.innerHTML = e.trigger.innerHTML.replace('icon-success', 'icon-copy'); }, 2000); }); }); } }); })(); </script> <script> Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() { window.anchors.options = { placement: CONFIG.anchorjs.placement, visible : CONFIG.anchorjs.visible }; if (CONFIG.anchorjs.icon) { window.anchors.options.icon = CONFIG.anchorjs.icon; } var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(','); var res = []; for (var item of el) { res.push('.markdown-body > ' + item.trim()); } if (CONFIG.anchorjs.placement === 'left') { window.anchors.options.class = 'anchorjs-link-left'; } window.anchors.add(res.join(', ')); }); </script> <script> Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() { Fluid.plugins.fancyBox(); }); </script> <script>Fluid.plugins.imageCaption();</script> <script src="/js/local-search.js" ></script>   <script src="/js/boot.js" ></script> <noscript> <div class="noscript-warning">Blog works best with JavaScript enabled</div> </noscript> </body> </html>