一、跨域产生的原因:因为ajax有一个同源策略,但咱们调用的接口来自于第三方网站,那这里必须跨域
二、什么情况下会产生跨域:
协议名://二级域名.一级域名.类型:端口号/目录1/文件名?参数1=值&参数2=值2&参数3=值3
1.协议不同
2.端口不同
3.主域不同
4.主域相同,子域不同
5.域名和ip
三、跨域解决方案
jsonp:前端+后端
CORS:服务端 http://www.ruanyifeng.com/blog/2016/04/cors.html
代理(服务端代理,客户端代理)
ajax跨域错误提示:
Failed to load https://api.douban.com/v2/movie/search?q=%E7%BA%A2%E6%B5%B7%E8%A1%8C%E5%8A%A8: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access.
vue代理实现:
打开vue脚手架->config->index.js,找到 dev: {
proxyTable: {
'/v2':{
target: 'https://api.douban.com', //要代理的接口
changeOrigin: true, //实现跨域
pathRewrite: {
'^/v2': '/v2'
}
}
},
jsonp实现原理:动态创建script标签 ,因为script中的src有跨域能力
jsonp实现步骤:
前端实现:
第一步:动态创建script标签,并添加callback参数
第二步:要创建callback函数 例如:getdata
后端实现:
第一步:接收浏览器传递过来的callback函数
例如:$callback=$_GET['callback'];
第二步:返回函数调用形式,其内部的参数就是json
例如: echo $callback."(".$json.")";
jsonp缺点:只支持 get请求
jsonp优点:兼容性比较好 兼容:IE5+
CORS跨域:http://www.ruanyifeng.com/blog/2016/04/cors.html
php 实现的cors跨域:header('Access-Control-Allow-Origin: *');
缺点:只支持IE10+
优点:
1.前端无需改代码,
2.支持所有请求方式 包括:post,delete,put,get