网站跨域有哪些解决方法

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

创新互联主要从事成都网站设计、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务花山,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>
            URL分享：<a href="http://6mz.cn/article/jidjie.html">http://6mz.cn/article/jidjie.html</a>
        </div>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li>
                    <a href="/article/dodjosj.html">如何在php中导入数据库 php数据库导出</a>
                </li><li>
                    <a href="/article/dodjohg.html">怎么把表情存在mysql 我该如何存在表情包</a>
                </li><li>
                    <a href="/article/dodjogj.html">linux写数据命令 Linux命令总结</a>
                </li><li>
                    <a href="/article/dodjohe.html">python轮廓函数 python 轮廓检测</a>
                </li><li>
                    <a href="/article/dodjopp.html">c语言中倒置函数 数据倒置c语言</a>
                </li>        </ul>
    </div>
</div>
<footer>
    <div class="message">
        <div class="mess container">
            <p>免费获取网站建设与品牌策划方案报价</p>
            <span>*主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上快上网。</span>
            <form action="">
                <input type="text" class="ipt1" placeholder="联系人">
                <input type="text" class="ipt2" placeholder="联系电话">
                <textarea name="" id=""  placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"></textarea>
                <a href="">提交需求</a>
            </form>
        </div>
    </div>
    <div class="footA">
        <div class="footAs container">
            <ul>
                <h3>联系我们</h3>
                <b>028-86922220</b>
                <li>手机：13518219792</li>
                <li>地址：成都市太升南路288号锦天国际A幢1002号</li>
                <li class="hr1"></li>
                <li>24小时服务热线：400-028-6601</li>
            </ul>
            <ul>
                <h3>网站建设服务</h3>
                <li>网页设计</li>
                <li>网站制作</li>
                <li>网站开发</li>
            </ul>
            <ul>
                <h3>网站推广服务</h3>
                <li>营销网站建设</li>
                <li>百度快速排名</li>
                <li>整站网站推广</li>
            </ul>
            <ul>
                <h3>网站运维服务</h3>
                <li>基础维护</li>
                <li>网站改版</li>
                <li>网站维护</li>
            </ul>
            <ul>
                <h3>FOLLOW US</h3>
                <li class="hr2"></li>
                <li>
                    <dd class="fl"><img src="/Public/Home/img/ewm.png" alt=""><p>微信二维码</p></dd>
                    <dd class="fr"><img src="/Public/Home/img/ewm.png" alt=""><p>微信二维码</p></dd>
                </li>
            </ul>
        </div>
        <div class="link container">
            友情链接：
            <a href="http://seo.cdkjz.cn/seo/" title="官网SEO排名" target="_blank">官网SEO排名</a>&nbsp;&nbsp;&nbsp;<a href="https://www.cdcxhl.com/tuoguan/deyang/" title="德阳服务器托管" target="_blank">德阳服务器托管</a>&nbsp;&nbsp;&nbsp;<a href="http://chengdu.cdweb.net/" title="成都网站建设" target="_blank">成都网站建设</a>&nbsp;&nbsp;&nbsp;<a href="http://www.skart.cn/" title="成都艺考培训" target="_blank">成都艺考培训</a>&nbsp;&nbsp;&nbsp;<a href="http://www.scdazhu.cn/" title="大足网站建设" target="_blank">大足网站建设</a>&nbsp;&nbsp;&nbsp;<a href="https://www.cdcxhl.com/mianfei/jianzhan/chengdu.html" title="成都免费自助建站" target="_blank">成都免费自助建站</a>&nbsp;&nbsp;&nbsp;<a href="http://www.wjwzjz.com/" title="温江做网站" target="_blank">温江做网站</a>&nbsp;&nbsp;&nbsp;<a href="https://www.scvps.cn/" title="租用服务器" target="_blank">租用服务器</a>&nbsp;&nbsp;&nbsp;<a href="http://seo.cdkjz.cn/seo/" title="关键词优化" target="_blank">关键词优化</a>&nbsp;&nbsp;&nbsp;<a href="http://www.cdhuace.com/huace.html" title="成都画册设计公司" target="_blank">成都画册设计公司</a>&nbsp;&nbsp;&nbsp;        </div>
    </div>
    <div class="footB">
        <div class="container">
            <div class="fl">
                Copyright © 2022  成都快上网科技有限公司     成都网站建设公司-选网站建设公司快上网！国内专业的网站制作公司！
            </div>
            <div class="fr">
                All Rights Reserved 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备19037934号-11</a>
            </div>
        </div>
    </div>
</footer>
</body>
</html>
<script>
    $(".con 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、为什么浏览器要使用同源策略？