企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
![](https://box.kancloud.cn/2de6f9c0c45ae82fb9ecbd225e5a665a_852x217.png) [参考网址]("https://www.cnblogs.com/chenshishuo/p/4919224.html") 浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了. 当协议,子域名,主域名,端口号,任意一个不同时,就算作不同的域。 不同域之间请求资源就算做跨域。 Javascript出于安全性的考虑,不允许跨域调用其他页面的对象。简单理解就是因为Javascript同源策略的限制,a.com域名下的js无法操作b.com域名下的对象。 ![](https://box.kancloud.cn/a0b601fae1ed7f6146de531fab608d34_688x236.png) ## 如何解决跨域 ### 1.jsonp ~~~ $.ajax({ type:"method", url:"", dataType:"jsonp", jsonp:"callback", success:function(data){ }, error:function(xhr){ console.log(xhr.status) } }) ~~~ ~~~ <script> // 使用jsonp跨域 $(function(){ var url = "https://api.douban.com/v2/book/search?q=javascript&count=1"; $.ajax({ url, method:"get", dataType:"jsonp", success(data){ console.log(data); }, error(xhr){ console.log(xhr.status); } }) }) </script> ~~~ ~~~ <script> // 使用jsonp跨域 $(function(){ var url = "https://api.douban.com/v2/book/search?q=javascript&count=1"; $.ajax({ url, method:"get", dataType:"jsonp", success(data){ console.log(data); }, error(xhr){ console.log(xhr.status); } }) }) </script> ~~~ ### 2.服务器的解决方案 ![](https://box.kancloud.cn/c93345b131a9e3baf9129b22bdd62f38_679x264.png) ### 3.js中script标签不受同源策略的影响也可以实现跨越 ~~~ var script = document.createElement("script"); script.src = "http://api.douban.com/v2/movie/subject/1764796? &callback=handleResponse"; document.body.prepend(script); function handleResponse(res) { // 对response数据进行操作代码 console.log(res) } ~~~ ~~~ <script> var url="http://api.douban.com/v2/movie/subject/1764796" var script = document.createElement("script"); script.src = `${url}?&callback=handleResponse`; document.body.prepend(script); function handleResponse(res) { // 对response数据进行操作代码 console.log(res); } </script> ~~~