跨域访问

最新推荐文章于 2025-07-17 21:53:23 发布

原创最新推荐文章于 2025-07-17 21:53:23 发布 · 228 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

javascript 专栏收录该内容

76 篇文章

订阅专栏

博客介绍了跨域访问，即跨域名访问，因同源策略，AJAX不能实现跨域。同源指协议、地址、端口相同，JavaScript或Cookie只能访问同域名内容。为实现跨域，有JSONP、iframe等方案，常用的JSONP利用HTML元素src属性可跨域的思路解决问题。

什么是跨域访问
- 跨域访问就是跨域名访问，即A网站的网页在代码上访问了B网站的页面
- 由于同源策略（浏览器的安全机制），所以，AJAX不能实现跨域访问。
  同源策略：这是一种浏览器策略，浏览器的安全机制：浏览器只允许来自同一个来源的文件相互访问。（前段与后端）
  同源：同样的协议，同样的地址，同样的端口
  JavaScript或Cookie只能访问同域名下的内容同样的协议，同样的地址，同样的端口。
AJAX不支持跨域访问，为了达到跨域访问的目的，出现了很多的解决方案：JSONP,iframe,flash,xhr2等。但是比较常用的是JSONP。
JSONP（JSON with Padding）可用于解决主流浏览器的跨域数据访问的问题）。跟JSON没有关系。这是一种跨域的技巧。
JSONP是如何实现跨域访问的？本质上是利用HTML元素的src属性都可以跨域的思路来解决的。因为src是可以跨域的。
如：img，script，iframe等标记的src属性的值都可以赋成其它域名的合法地址。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" name="" id="wd" value="" />
        <ul id="list">
            
        </ul>
    </body>
</html>
<script>
    let oWd = document.querySelector("#wd");
    let oUl = document.querySelector("#list");
    
    oWd.oninput = function(){
        let scrpit = document.createElement("script");
        scrpit.src = "http://suggestion.baidu.com/su?wd="+this.value+"&cb=fun";
        document.body.appendChild(scrpit);
    }
    function fun(str){
        let strHtml = "";
        for(let i=0; i<str.s.length; i++){
            strHtml += "<li>" +str.s[i]+ "</li>";
        }
        oUl.innerHTML = strHtml;
    }
</script>