js解决跨域问题的两种方法

  1. 可以通过后端转发,因为服务器端不存在跨域的问题,然后后端再把数据返回给你,变成非跨域问题

  2. 后端不能提供接口转发的话
    (1)可以让第三方平台服务端给你网站添加跨域(这种方法不现实)

    (2)jsonp,jsonp本质就是利用html的script标签的跨域调用能力,因为页面上有三种资源不受同源限制,它们是:js脚本、css样式文件、图片,首先创建script标签,src值为第三方平台的地址,地址需要带上一个必须参数callback,并且它的值是已经被定义好的函数,当script加载完成后,由于脚本内容已经被约定好了,执行起脚本内容时,即执行定义好的函数,并且将请求内容返回作为函数参数返回,成功解决跨域(jsonp只支持get,不支持post,且存在注入危险)
    原理:因为script标签的src引用的脚本到达浏览器时会执行,而我们已经定义好了一个同名函数,所以json格式的数据,就作为参数传递给了我们定义的函数,就这样完成了跨域数据交换

代码解析:

//淘宝搜索的关键字
var keyword = document.getElementById("keyword").value;
//创建script标签
var script = document.createElement("script");
//往script标签中添加src地址(url)
script.src="https://suggest.taobao.com/sug?code=utf-8&q="+keyword+"&callback=xixi";
//往html中插入script标签
var head = document.querySelector("head");
head.appendChild(script);
//当标签插入后,callback会返回一个函数调用  xixi(data)  ,其中data包含了跨域请求得到的数据,  所以会调用下面window['xixi']这个方法,把参数数据传递给我们定义的函数xixi,实现了跨域数据的交换
window['xixi'] = function(data){
	var li="";
	for(var i=0;i

你可能感兴趣的:(跨域,javascript,同源,同源策略,跨域)