产生跨域原因[浏览器同源策略]:协议不同(http/https)、域名不同、端口不同
演示下出现跨域的情况,请求豆瓣api:http://api.douban.com/v2/movie/top250
jquery-ajax请求
function req_test () {
var url = "http://api.douban.com/v2/movie/top250"
$.ajax({
type: "GET",
url: url,
success: function (res) {
console.log(res)
}
});
}
req_test()
控制台直接报错...
谷歌翻译:请求的资源上不存在“Access-Control-Allow-Origin”标头。 因此不允许原点'null'访问。
解决跨域的方法很多,其中包括CORS(Cross-Origin-Resource-Sharing),jsonp
使用CORS解决跨域问题,直接让后台人员设置就好,前端照常请求。参考博客:跨域资源共享 CORS 详解
下面列举jsonp的两种实现方式(js / jquery ajax)
1.通过<script>请求,浏览器对<script>没有同源限制
function jsonpProcess (data) {
console.log(data)
}
function jsonp_Script () {
var _script = document.createElement("script");
_script.type = "text/javascript";
_script.src = "http://api.douban.com/v2/movie/top250?start=25&count=30&callback=jsonpProcess";
document.head.appendChild(_script)
}
jsonp_Script();
成功请求,注意src中还附加了请求参数,这是个GET请求,jsonp也仅仅支持GET请求。数据在自定义函数jsonpProcess中返回,注意使用callback=jsonpProcess调用
2.通过jquery ajax请求,jquery ajax进行jsonp请求需要额外设置两个属性:dataType,jsonpCallback
function jsonp_jquery () {
var url = "http://api.douban.com/v2/movie/top250"
var data = JSON.stringify({
"start": 25,
"count": 30
})
$.ajax({
type: "GET",
url: url,
data: data,
dataType: "jsonp",
jsonpCallback: "jsonpProcess", // jsonpProcess自定义函数名
success: function (res) {
console.log(res)
}
});
}
jsonp_jquery();
注意:jsonpCallback属性的值为自定义函数jsonpProcess
3.vue-resource解决跨域问题
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script type="text/javascript">
Vue.http.jsonp("http://api.douban.com/v2/movie/top250", {
params: {
start: 20,
count: 30
}
}).then(response => {
console.log(response)
}, response => {
console.log(response)
});
</script>