跨域问题产生的原因和解决方法

一. 产生的原因

1. 什么是跨域

跨域是指A网页想要获取B网页的资源,如果A、B页面的协议、域名、端口号、子域名不同,所进行的访问都是跨域的,而浏览器一抖为了安全都限制了跨域访问。

跨域是指浏览器不执行其他页面脚本,是由于同源策略造成的,是对Javascript的一种安全限制

2. 什么是同源策略

同源是指协议、域名、端口都保持一致

http://www.baidu.com:8080/index.html (http协议,www.baidu.com 域名、8080 端口 ,只要这三个有一项不一样的都是跨域,这里不一一举例子)

http://www.baidu.com:8080/matsh.html(不跨域)

http://www.baidu.com:8081/matsh.html(端口不一样,跨域)

注意:localhost 和127.0.0.1 虽然都指向本机,但也属于跨域

二. 解决方案

1. JSONP

  • JSONP是一个非官方协议,它允许在服务器集成script tags返回客户端,通过javascript callback的形式实现跨域访问
  • 基本思想:网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源策略限制;服务器收到请求后,将数据放在一个指定名字的回调函数里穿回来。
    <script type="text/javascript">
        function jsonpCallback(result){
            //alert(result);
            for(var i in result){
                alert(i + ":" + result[i]);     //循环输出
            }
        }
        var JSONP = document.createElement("script");
        JSONP.type = "text/javascript";
        JSONP.src = "http://crossdomain.com/services.php?callback=jsonpCallback";
        document.getElementsByTagName("head")[0].appendChild(JSONP);
    </script>
  • 缺点:get请求,前后端都要修改

2. 修改配置实现Chrome跨域访问

右键chrome.exe,选择属性,选择快捷方式,在目标输入框加上 --disable-web-security --user-data-dir=D:\chromeCache ,注意需要增加一个空格。

posted @ 2021-02-04 17:45  Mike丶  阅读(1364)  评论(0编辑  收藏  举报