网站跨域有哪些解决方法

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

创新互联主要从事成都网站设计、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务花山,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://scyanting.com/article/jidjie.html">http://scyanting.com/article/jidjie.html</a>
            </div>
        </div>
        <div class="contentr fr">
            <h3>其他资讯</h3>
            <ul>
                <li>
                        <a href="/article/dcichsp.html">php数组中的数据取出 php数组中的数据取出怎么操作</a>
                    </li><li>
                        <a href="/article/dcisosj.html">水星路由器升级 水星路由器升级包下载</a>
                    </li><li>
                        <a href="/article/dcisosc.html">怎么加密无线路由器 路由器无线网怎么加密</a>
                    </li><li>
                        <a href="/article/dcisosg.html">Linux命令行了微信 linux如何使用微信</a>
                    </li><li>
                        <a href="/article/dcisodi.html">go语言高级调试 go语言系统调用</a>
                    </li>            </ul>
        </div>
    </div>
</div>
<!--底部-->
<footer>
    <div class="foot">
        <div class="container">
            <h1>盐亭大橙子建站您身边的网站制作服务商</h1>
            <div class="foot1">
                <ul>
                    <li>
                        <dl><i class="iconfont">&#xe659;</i><b>地址ADDRESS</b></dl>
                        <p>四川-成都青羊区太升南路288号<br>
                            锦天国际A座10楼
                        </p>
                    </li>
                    <li>
                        <dl><i class="iconfont">&#xe604;</i><b>电话/TEL</b></dl>
                        <p><a href="tel:02886922220" target="_blank">028 86922220</a> (工作日)<br>
                            <a href="tel:18980820575" target="_blank">1898082 0575</a> ( 7x24 )
                        </p>
                    </li>
                    <li>
                        <dl><i class="iconfont">&#xe658;</i><b>QQ咨询</b></dl>
                        <p> 244261566 (售前)<br>
                            631063699 (售后)
                        </p>
                    </li>
                    <li>
                        <dl><i class="iconfont">&#xe600;</i><b>邮箱/E: mail</b></dl>
                        <p> service@cdcxhl.com (业务)<br>
                            hr@cdcxhl.com (求职)
                        </p>
                    </li>
                </ul>
            </div>
            <div class="link">
                友情链接：
                <a href="http://www.lbtgc.cn/" title="力比特工程" target="_blank">力比特工程</a>&nbsp;&nbsp;&nbsp;<a href="http://www.cxhljz.cn/" title="成都网站制作" target="_blank">成都网站制作</a>&nbsp;&nbsp;&nbsp;<a href="http://www.cdhuace.com/vi.html" title="VI设计" target="_blank">VI设计</a>&nbsp;&nbsp;&nbsp;<a href="http://www.huixingan.com/" title="广安园林景观设计" target="_blank">广安园林景观设计</a>&nbsp;&nbsp;&nbsp;<a href="https://www.cdcxhl.com/h5.html" title="成都响应式网站" target="_blank">成都响应式网站</a>&nbsp;&nbsp;&nbsp;<a href="http://www.njjike.cn/" title="成都办公窗帘" target="_blank">成都办公窗帘</a>&nbsp;&nbsp;&nbsp;<a href="http://www.cxhljz.cn/" title="成都网站设计" target="_blank">成都网站设计</a>&nbsp;&nbsp;&nbsp;<a href="https://www.cdxwcx.com/" title="成都网站建设" target="_blank">成都网站建设</a>&nbsp;&nbsp;&nbsp;<a href="http://www.kswcd.com/mobile/" title="微信小程序开发" target="_blank">微信小程序开发</a>&nbsp;&nbsp;&nbsp;<a href="http://chengdu.cdcxhl.cn/qiye/" title="企业网站设计" target="_blank">企业网站设计</a>&nbsp;&nbsp;&nbsp;            </div>
        </div>
    </div>
    <div class="copy container">
        Copyright © 2017-2023 All Rights Reserved. 青羊区大橙子信息咨询工作室 版权所有  <a href="http://www.beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2022028542号-18</a>
        [原创设计,独立版权。未经许可.不得拷贝或镜像]<br>
        <a href="http://www.kswsj.cn/" target="_blank">网站营销推广</a> | <a href="https://www.cdcxhl.com/pinpai.html" target="_blank">品牌网站设计</a> | <a href="http://www.cdweb.net/" target="_blank">自适应网站制作</a> | <a href="http://cdkjz.cn/wangzhan/pinpai/" target="_blank">品牌网站制作</a> | <a href="http://chengdu.cdxwcx.cn/" target="_blank">成都网站制作</a> | <a href="https://www.cdcxhl.com/cloud/" target="_blank">云服务器</a> | <a href="https://www.cdcxhl.com/weihu/abazhou.html" target="_blank">盐亭网站维护</a> | (盐亭网站制作QQ : 631063699 )</div>
</footer>
<!--在线咨询-->
<div class="fot">
    <ul>
        <li>
            <a href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" target="_blank">
                <img src="/Public/Home/img/fot1.png" alt="建站咨询">
                <p>在线咨询</p>
            </a>
        </li>
        <li>
            <a href="tel:18980820575" target="_blank">
                <img src="/Public/Home/img/fot2.png" alt="建站电话">
                <p>拨打电话</p>
            </a>
        </li>
    </ul>
</div>
</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>