跨域访问请求处理

在浏览器中，通过js代码访问不同域名下的url，可以是js的xhr请求，或者是ajax请求，或者是iframe(js访问iframe内部的DOM时)。这时，会被禁止访问。出现这种问题时，需要通过跨域访问。

不是通过js代码进行的跨域访问，不存在跨域(禁止访问)问题

跨域问题的解决方案有很多

一，在对方服务器的响应头中添加 Access-Control-Allow-Origin。
它的值可以是域名，也可以是*。
这种方案，只有在对方信任或者不在乎服务器安全的情况下，才能使用。

二，如果域名都是用一个域名的子域名。则可以使用document.domin = “根域名”来统一执行环境中的域名。

这种方案只能在同一个公司或者同一个组织内部使用
如：

document.domain = "jundong.com"
var data = $('iframe')[0].contentWindow.document.body.innerText;
console.log(data)

但iframe引入的文件里，js也需要指明一样的子域名:

document.domain = "jundong.com"

三，JSONP (JSON Padding)
jsonp处理跨域请求是最常用的一种办法。
原理：浏览器不限制通过script标签引入其他网站的脚本，所以通过javaScript向页面动态的添加一个script标签。并且指定其url为一个特殊的url，对方的服务器针对这个特殊的url的请求，进行特殊的处理。
例如：向body里添加一个script标签

<script src="http://api/baidu.com/weather/functionName"></script>

会让浏览器向src里的url发起一个get请求。因为jsonp只能是get请求。
对方的服务器在收到这个请求后，会返回一个特殊的js文件，文件的内容如下：

functionName({
     天气数据
})

如果此时在页面中定义了functionName函数，则functionName会被调用，并且能够获得天气数据。
这种将json数据放入指定的函数参数位置的跨域访问解决方案被称为JSONP。

function functionName(data){
    console.log(data)
}
var s = document.createElement('script')
s.src = "http://api.map.baidu.com/telematics/v3/weather?location=北京&output=json&ak=iw5m2G7ayDow8ofDdDGVUMB3&mcode=com.BaiduWeather&callback=functionName";
document.body.appendChild(s)

在jQuery当中，$.getJSON()方法支持JSONP，在url添加callback=?即可

$.getJSON("http://api.map.baidu.com/weather?location="北京"&callback=?",null,function(res){
    console.log(res)
})

四，将要请求的url发送给自己的服务端，让服务端发起请求(服务端没有跨域限制)
服务端请求成功后，再回传给浏览器中的js。这种方法称为服务端代理请求，这种方式只需要自己的服务端支持一下就可以，是比较常用的方法，没有任何限制。
这种方式还能实现其他方案无法实现的功能。通过服务端抓取别人的网页，将网页上的数据取出来，变成json返回给我们。
过程：浏览器–>服务器–>第三方网页–>抓取数据–>转成json返回给浏览器
实际应用：在nodejs中，使用cheerio模块，可以像jquery一样从HTML字符串中筛选并提取想要的字符。

跨域访问请求处理

猜你喜欢