用JSONP实现跨域
原理： 利用 script 标签引用JS文件时不受是否跨域的影响，在后端支持的情况下，实现跨域
简单代码示例
// 这里是前端代码
<!doctype html>
<html>
<head>
</head>
<body>
<script>
var url = "http://abc.com/jsonp/xxx?yyy=zzz&callback=fn"
// 这里的 url 是提供jsonp服务的任意地址
// callback=fn 只是一个示例，只要可以和后端的参数设置匹配即可
var script = document.createElement('script')
// 创造一个 script 标签
script.setAttribute('src', url)
// 给这个 script 标签设置 src 属性
document.querySelector('body').appendChild(script)
// 把创造的 script 标签加入 body 中，准备调用
var fn = function(data) {
// do something...
}
// 这个函数用于处理后端返回的数据，将数据解析处理后得到相应的结果并展现给用户
</script>
</body>
</html>
// 这里是后端代码
fn({
"data1":"xxx",
"data2":"yyy",
"data3":"zzz"
// ...更多的数据
})
// 这只是一个后端返回数据的简单示例，实际开发中，fn 这个名字是可以随意变化的
// 只要前后端能够统一即可，也可以通过后端代码获取前端代码的 url 中的特定字符串作为名称返回给前端
// 而前端只要自行将该字符串作为处理数据的函数名即可，无需再与后端约定，相对而言自由度更高
// 解决了数据名称的问题后剩下的就是字符串的拼接问题，只要后端最后返回给前端的数据格式没问题就可以了
用CORS实现跨域
根据 CORS 的原理，前端的 ajax 代码不需要任何改变，只需要后端在返回结果中加入一个响应头(Access-Control-Allow-Origin)�即可，浏览器根据这个响应头作出相应处理，以辨别当前�页面是否可以获得响应数据。
简单代码示例
// 这里是前端代码
var xhr = new XMLHttpRequest()
xhr.open(method, path)
// method是发送方式(get/post)， path是服务器路径
xhr.onreadystatechange = function(){
// do something...
}
�xhr.send()
// 这里只写出 ajax 最基本的代码片段，因为� CORS 方法对前端的代码没有影响
// 这里是后端代码
// 以 server-mock 为例
router.get(path, function (req, res) {
// do something...
res.header("Access-Control_Allow-Origin", "*")
res.send(newsData)
})
// 代码的重点就是 res.header() ，这条语句给请求数据的页面返回了一个响应头，
// 浏览器在处理响应时得到了这个响应头，于是允许页面拿到响应数据
// 第二个参数可以是特定的域名，即只允许�指定的域拿到响应数据
// 也可以不限定获取资格，即用通配符 * 匹配所有域名
降域实现跨域
所谓降域，�是指当两个页面拥有相同的主域名，但是二级域名不同时，通过降域的方法实现跨域。这种方法对主域名不同的页面无效。
在代码中加入下面这条代码即可实现�降域效果
document.domain = 'xxx' // xxx 为主域名
网友评论