网站跨域有哪些解决方法

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

创新互联主要从事成都网站设计、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务花山,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://www.cdkjz.cn/article/jidjie.html">http://www.cdkjz.cn/article/jidjie.html</a>
        </div>
        <div class="g-return-wrapper clearfix">
            <a href="http://www.cdkjz.cn/" class="home">返回首页</a>
            <a href="http://www.cdkjz.cn/news/" class="column">了解更多建站资讯</a>
        </div>
    </div>
</div>
<div class="full-related-news">
    <h3 class="related-title">相关资讯</h3>
    <div class="related-news weblg">
        <ul class="clearfix">
            <li>
                    <a href="/article/psihsg.html">
                        <h2 class="title">web前端中HTML的笔试题有哪些</h2>
                    </a>
                </li><li>
                    <a href="/article/psihcj.html">
                        <h2 class="title">如何在Android中判断网络状态</h2>
                    </a>
                </li><li>
                    <a href="/article/psihep.html">
                        <h2 class="title">SpringBoot中Filter和Listener是什么</h2>
                    </a>
                </li><li>
                    <a href="/article/psihsj.html">
                        <h2 class="title">.NET平台下的跨平台实例分析</h2>
                    </a>
                </li><li>
                    <a href="/article/psipcd.html">
                        <h2 class="title">JavaScript可以用来做什么</h2>
                    </a>
                </li><li>
                    <a href="/article/psiphp.html">
                        <h2 class="title">excel单元格内换行的方法是什么</h2>
                    </a>
                </li><li>
                    <a href="/article/psihsc.html">
                        <h2 class="title">大数据时代里，运维工程师的自我修养i</h2>
                    </a>
                </li><li>
                    <a href="/article/psihei.html">
                        <h2 class="title">Jquery对象与DOM对象的转换</h2>
                    </a>
                </li>        </ul>
    </div>
</div>
<div class="full-icontact-cover m-ft-contact">
    <div class="weblg">
        <div class="clearfix content">
            <div class="motto">
                多年建站经验
            </div>
            <div class="info">
                <h3>多一份参考，总有益处</h3>
                <h2> 联系快上网，免费获得专属《策划方案》及报价</h2>
                <div class="msg">
                    <p>咨询相关问题或预约面谈，可以通过以下方式与我们联系</p>
                    <h4> 大客户专线 &nbsp;&nbsp;成都：<a
                            href="tel:+13518219792" rel="nofollow">13518219792</a>
                        &nbsp;&nbsp;座机：<a href="tel:02886922220" rel="nofollow">028-86922220</a>
                    </h4>
                </div>
            </div>
        </div>
        <div class="btns clearfix">
            <a href="https://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" target="_blank" rel="nofollow"
               class="oline">在线咨询</a>
            <a href="javascript:;" class="edit" rel="nofollow">提交需求</a>
        </div>
    </div>
</div>
<div class="footer-content">
    <div class="weblg clearfix">
        <div class="friend-links">
            <h6 class="clearfix">
                <span class="tilte">友情链接</span>
                <a class="exchagne" href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes">交换友情链接</a>
            </h6>
            <div class="link-list clearfix">
                <div class="link-slider">
                    <a href="http://www.cdkjz.cn/small/" title="成都微信小程序开发" target="_blank">成都微信小程序开发</a><a href="http://chengdu.cdxwcx.cn/wangzhan/" title="手机网站制作" target="_blank">手机网站制作</a><a href="https://www.cdcxhl.cn/
" title="虚拟主机" target="_blank">虚拟主机</a><a href="http://www.bzwzjz.com/serve/" title="高端网站建设" target="_blank">高端网站建设</a><a href="https://www.cdcxhl.cn/
" title="云服务器香港" target="_blank">云服务器香港</a><a href="http://www.cdhuace.com/vi.html" title="vi形象设计" target="_blank">vi形象设计</a><a href="http://www.scpengan.com/" title="蓬安网站建设" target="_blank">蓬安网站建设</a><a href="https://www.cdcxhl.com/sosuo.html" title="网站排名优化" target="_blank">网站排名优化</a><a href="http://www.hfwuji.com/" title="成都气球装饰" target="_blank">成都气球装饰</a><a href="http://www.teliergzn.com/" title="特丽尔硅藻泥" target="_blank">特丽尔硅藻泥</a>                </div>
            </div>
        </div>
    </div>
    <div class="full-foot-bottom">
        <div class="weblg clearfix">
            <p>成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询<a href="tel:028-86922220">028-86922220</a></p>
            <p>
                成都快上网科技有限公司-四川网站建设设计公司 | <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">蜀ICP备19037934号</a> Copyright 2020,ALL Rights Reserved cdkjz.cn | <a href="http://www.cdkjz.cn/" target="_blank">成都网站建设</a> | © Copyright 2020版权所有.</p>
            <p>专家团队为您提供<a href="http://www.cdkjz.cn/" target="_blank">成都网站建设</a>,<a href="http://www.cdkjz.cn/" target="_blank">成都网站设计</a>,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | <a href="###">网站建设地图</a></p>
        </div>
    </div>

</div>
<script type="text/javascript" src="../js/idangerous.swiper.min.js"></script>
<script type="text/javascript" src="../js/wow.min.js"></script>
<script type="text/javascript" src="../js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="../js/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="../js/layout.js"></script>
</body>
</html>
<script>
    $(".singlepage 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);
        }
    });
    window.onload=function(){
        document.oncontextmenu=function(){
            return false;
        }
    }
</script>

网站建设

网站推广

案例

方案

电商网站开发

微信小程序

我们

联系

精准传达 • 有效沟通

查看其它板块

网站跨域有哪些解决方法

1、什么是跨越？

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

3、什么是同源策略？

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

网络推广

Network promotion

网站方案

Solution

电商网站开发

E-commerce & System

我们

About Us

联系

Contact Us

精准传达 • 有效沟通

查看其它板块

网站跨域有哪些解决方法

1、什么是跨越？

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

3、什么是同源策略？

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