网站跨域有哪些解决方法

这篇文章主要介绍了网站跨域有哪些解决方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

创新互联主要从事成都网站设计、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务花山,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

1、什么是跨越？

一个网页向另一个不同域名/不同协议/不同端口的网页请求资源，这就是跨域。
跨域原因产生：在当前域名请求网站中，默认不允许通过ajax请求发送其他域名。

2、为什么会产生跨域请求？

因为浏览器使用了同源策略

3、什么是同源策略？

同源策略是Netscape提出的一个著名的安全策略，现在所有支持JavaScript的浏览器都会使用这个策略。同源策略是浏览器最核心也最基本的安全功能，如果缺少同源策略，浏览器的正常功能可能受到影响。可以说web是构建在同源策略的基础之上的，浏览器只是针对同源策略的一种实现。

undefined

4、为什么浏览器要使用同源策略？

是为了保证用户的信息安全，防止恶意网站窃取数据，如果网页之间不满足同源要求，将不能:
- 1、共享Cookie、LocalStorage、IndexDB
- 2、获取DOM
- 3、AJAX请求不能发送

同源策略的非绝对性：




<link/>
<video/>
<audio/></pre><p>等带有src属性的标签可以从不同的域加载和执行资源。其他插件的同源策略：flash、java applet、silverlight、googlegears等浏览器加载的第三方插件也有各自的同源策略，只是这些同源策略不属于浏览器原生的同源策略，如果有漏洞则可能被黑客利用，从而留下XSS攻击的后患</p><p>所谓的同源指：域名、网络协议、端口号相同，三条有一条不同就会产生跨域。 例如：你用浏览器打开<code>http://baidu.com</code>，浏览器执行JavaScript脚本时发现脚本向<code>http://cloud.baidu.com</code>域名发请求，这时浏览器就会报错，这就是跨域报错。</p><h4>解决方案有五：</h4><h5>1、前端使用jsonp （不推荐使用）</h5><ul><li>当我们正常地请求一个JSON数据的时候，服务端返回的是一串 JSON类型的数据，而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ，所以我们只能把参数通过 url的方式传递,所以jsonp的 type类型只能是get示例：</li></ul><pre>$.ajax({
    url: &#39;http://192.168.1.114/yii/demos/test.php&#39;, //不同的域
    type: &#39;GET&#39;, // jsonp模式只有GET 是合法的
    data: {
        &#39;action&#39;: &#39;aaron&#39;
    },
    dataType: &#39;jsonp&#39;, // 数据类型
    jsonp: &#39;backfunc&#39;, // 指定回调函数名，与<a title="服务器" target="_blank" href="http://www.cdfuwuqi.com/">服务器</a>端接收的一致，并回传回来
})</pre><ul><li>使用JSONP 模式来请求数据的整个流程：客户端发送一个请求，规定一个可执行的函数名（这里就是 jQuery做了封装的处理，自动帮你生成回调函数并把数据取出来供success属性方法来调用,而不是传递的一个回调句柄），服务器端接受了这个 backfunc函数名，然后把数据通过实参的形式发送出去<br/></li><li>（在jquery 源码中， jsonp的实现方式是动态添加<code><script></code>标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数，当 <code><script></code>代码插入时函数执行，执行完毕后就 <code><script></code>会被移除。同时jquery还对非跨域的请求进行了优化，如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。）</li></ul><h5>2、后台Http请求转发</h5><ul><li>使用HttpClinet转发进行转发(简单的例子 不推荐使用这种方式)</li></ul><pre>try {
    HttpClient client = HttpClients.createDefault();            //client对象
    HttpGet get = new HttpGet("http://localhost:8080/test");    //创建get请求
    CloseableHttpResponse response = httpClient.execute(get);   //执行get请求
    String mes = EntityUtils.toString(response.getEntity());    //将返回体的信息转换为字符串
    System.out.println(mes);
} catch (ClientProtocolException e) {
    e.printStackTrace();
} catch (IOException e) {
    e.printStackTrace();
}</pre><h5>3、后台配置同源Cors （推荐）</h5><ul><li>在SpringBoot2.0 上的跨域 用以下代码配置 即可完美解决你的前后端跨域请求问题</li></ul><p>在SpringBoot2.0 上的跨域 用以下代码配置 即可完美解决你的前后端跨域请求问题</p><pre>import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * 实现基本的跨域请求
 * @author linhongcun
 *
 */
@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /*是否允许请求带有验证信息*/
        corsConfiguration.setAllowCredentials(true);
        /*允许访问的客户端域名*/
        corsConfiguration.addAllowedOrigin("*");
        /*允许服务端访问的客户端请求头*/
        corsConfiguration.addAllowedHeader("*");
        /*允许访问的方法名,GET POST等*/
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }



}</pre><h5>4、使用SpringCloud网关</h5><ul><li><p>服务网关(zuul)又称路由中心，用来统一访问所有api接口，维护服务。</p></li><li><p>Spring Cloud Zuul通过与Spring Cloud Eureka的整合，实现了对服务实例的自动化维护，所以在使用服务路由配置的时候，我们不需要向传统路由配置方式那样去指定具体的服务实例地址，只需要通过Ant模式配置文件参数即可</p></li></ul><h5>5、使用nginx做转发</h5><ul><li>现在有两个网站想互相访问接口 &nbsp;在<code>http://a.a.com:81/A</code>中想访问 <code>http://b.b.com:81/B</code> 那么进行如下配置即可</li><li>然后通过访问 <code>www.my.com/A</code> 里面即可访问 <code>www.my.com/B</code></li></ul><pre>server {
        listen       80;
        server_name  www.my.com;
        location /A {
            proxy_pass  http://a.a.com:81/A;
            index  index.html index.htm;
        }
        location /B {
            proxy_pass  http://b.b.com:81/B;
            index  index.html index.htm;
        }
    }</pre><ul><li>如果是两个端口想互相访问接口 &nbsp;在<code>http://b.b.com:80/Api</code>中想访问 <code>http://b.b.com:81/Api</code> 那么进行如下配置即可</li><li>使用nginx转发机制就可以完成跨域问题</li></ul><pre>server {
        listen       80;
        server_name  b.b.com;
        location /Api {
            proxy_pass  http://b.b.com:81/Api;
            index  index.html index.htm;
        }
    }</pre><p>感谢你能够认真阅读完这篇文章，希望小编分享网站跨域有哪些解决方法内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!</p>            
            
                                <br>
                    网站栏目：网站跨域有哪些解决方法                    <br>
                    文章出自：<a href="http://chengdu.cdxwcx.cn/article/jidjie.html">http://chengdu.cdxwcx.cn/article/jidjie.html</a>
                </div>
            </div>
        </div>
        <!--左边end-->
        <!--右边begin-->
        <div class="news_r">
            <div class="news_t"><h2 class="h2">其他资讯</h2></div>
            <div class="news_ul3">
                <ul>
                    <li>
                            <a href="/article/djhspc.html">
                                <h3 class="h3">mybatis-oracle(ssi2)批量删除-创新互联</h3>
                            </a>
                        </li><li>
                            <a href="/article/djhsgs.html">
                                <h3 class="h3">vuex页面刷新数据还在吗vuex中的数据在页面刷新以后消失怎么办？-创新互联</h3>
                            </a>
                        </li><li>
                            <a href="/article/djhsgc.html">
                                <h3 class="h3">Java中的多态-创新互联</h3>
                            </a>
                        </li><li>
                            <a href="/article/djhsps.html">
                                <h3 class="h3">UnrealEngine中的UHT和UBT-创新互联</h3>
                            </a>
                        </li><li>
                            <a href="/article/djhsji.html">
                                <h3 class="h3">CentOS7下安装Oracle12c-创新互联</h3>
                            </a>
                        </li>                </ul>
            </div>
        </div>
        <!--右边end-->
        <div class="c_l"></div>
    </div>
</div>
<!--正文end-->
<!--尾部begin-->
<!--尾部begin-->
<footer>
    <div class="f_bg">
        <div class="wrap">
            <div class="links">
                <h2 class="h2">甜橘子解决方案<a href="/solution/" title="更多" class="more">更多+</a></h2>
                <ul>
                    <li><a href="/solution/xiaochengxu.html" title="小程序定制解决方案">小程序定制解决方案</a></li>
                    <li><a href="/solution/qiyewz.html" title="企业网站建设解决方案">企业网站建设解决方案</a></li>
                    <li><a href="/solution/menhuwz.html" title="行业门户网站建设解决方案">行业门户网站建设解决方案</a></li>
                    <li><a href="/solution/yingxiaowz.html" title="营销型网站建设解决方案">营销型网站建设解决方案</a></li>
                    <li><a href="/solution/waimaowz.html" title="外贸网站建设解决方案">外贸网站建设解决方案</a></li>
                    <li><a href="/solution/pingpaiwz.html" title="品牌形象网站建设解决方案">品牌形象网站建设解决方案</a></li>
                    <li><a href="/solution/dianziwz.html" title="数码、电子产品网站建设解决方案">数码、电子产品网站建设解决方案</a></li>
                    <li><a href="/solution/jituanwz.html" title="集团、上市企业网站建设解决方案">集团、上市企业网站建设解决方案</a></li>
                    <li><a href="/solution/dichanwz.html" title="房地产、地产项目网站建设解决方案">房地产、地产项目网站建设解决方案</a></li>
                    <li><a href="/solution/zhubaowz.html" title="珠宝高端奢侈品网站建设解决方案">珠宝高端奢侈品网站建设解决方案</a></li>
                </ul>
            </div>
            <div class="links w2">
                <h2 class="h2">我们的实力<a href="/about/" title="更多" class="more">更多+</a></h2>
                <ul>
                    <li>10年专业互联网服务经验</li>
                    <li>成都高端建站设计团队</li>
                    <li>资深行业分析策划</li>
                    <li>B2C营销型网站建设者</li>
                    <li>前沿视觉设计、研发能力</li>
                    <li>前端代码深度符合SEO优化</li>
                    <li>成都市高新技术企业证书</li>
                    <li>具有完备的项目管理</li>
                    <li>完善的售后服务体系</li>
                    <li>深厚的网络运营经验</li>
                    <li>时刻新技术研发能力</li>
                    <li>16个网站系统软件著作权</li>
                </ul>
            </div>
            <div class="f_div2_r">
                <h2 class="h2">关于甜橘子<a href="/about/" title="更多" class="more">更多+</a></h2>
                甜橘子网站设计，为客户量身定制各类网站建设业务，包括企业型、电子商务型、行业门户型、品牌建立型等各类网站，实战经验丰富，成功案例众多。以客户利益为出发点，甜橘子网站制作为客户规划、定制符合企业需求、带有营销价值的建站方案，提供从网站前期定位分析策划到网站界面设计... </div>
            <div class="c_l"></div>
        </div>
        <div class="wrap">
            <div class="f_div3"> <span class="l">成都网站制作案例©2020 甜橘子设计 版权所有  | <a href="http://chengdu.cdxwcx.cn" target="_blank">甜橘子网站设计</a><a href="http://chengdu.cdxwcx.cn" target="_blank">chengdu.cdxwcx.cn</a></span> <span class="r"><a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备11025516号</a></span> </div>
        </div>
    </div>
</footer>
<!--尾部end-->
<script language="javascript" src="/Public/Home/js/foot.js"></script>
<!--尾部end-->
<!--侧边栏begin-->
<div class="side">
    <ul>
        <li id="qqonline_xbceo"><a href="tencent://message/?uin=631063699&Site=&Menu=yes"><i class="bgs1"></i>QQ咨询</a></li>
        <li class="shangqiao"><a href="tencent://message/?uin=532337155&Site=&Menu=yes" title="在线咨询">
            <div><i class="bgs2"></i>在线咨询</div>
        </a></li>
        <li class="sideewm"><i class="bgs3"></i>官方微信
            <div class="ewBox"></div>
        </li>
        <li class="sideetel"><i class="bgs4"></i>联系电话
            <div class="telBox">
                <dd class="bgs1"><span>座机</span><a href="tel:028-86922220" target="_blank">028-86922220</a></dd>
                <dd class="bgs2"><span>手机</span><a href="tel:13518219792" target="_blank">13518219792</a></dd>
            </div>
        </li>
        <li class="sidetop" onClick="goTop()" id="sidetop"><i class="bgs6"></i>返回顶部</li>
    </ul>
</div>
<script type="text/javascript">
    $('.sideewm').hover(function(){
        $('.ewBox').stop().fadeIn();
    },function(){
        $('.ewBox').stop().fadeOut();
    });
    $('.sideetel').hover(function(){
        $('.telBox').stop().fadeIn();
    },function(){
        $('.telBox').stop().fadeOut();
    });
    $(".con_id img").each(function(){
        var src = $(this).attr("src");    //获取图片地址
        var str=new RegExp("http");
        var result=str.test(src);
        if(result==false){
            var url = "https://www.cdcxhl.com"+src;    //绝对路径
            $(this).attr("src",url);
        }
    });
</script>
<!-- WPA start -->
<!-- WPA end -->
<!--侧边栏end-->
</body>
</html>

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

首页

网站建设

网站制作案例

解决方案

网站设计报价

网站制作动态

关于我们

联系我们

成都网站建设设计将想法与焦点和您一起共享

网站跨域有哪些解决方法

1、什么是跨越？

2、为什么会产生跨域请求？

3、什么是同源策略？

4、为什么浏览器要使用同源策略？

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

成都网站建设设计 将想法与焦点和您一起共享

网站跨域有哪些解决方法

1、什么是跨越？

2、为什么会产生跨域请求？

3、什么是同源策略？

4、为什么浏览器要使用同源策略？

成都网站建设设计将想法与焦点和您一起共享