跨域请求数据
什么是跨域?
跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制
什么是同域：协议, 域名, 端口号 完全一致, 是同域.
协议: http, https
域名: 一级域名, 二级域名, 三级域名
端口号: 80(http), 443(https)等
如何解决跨域问题
原生JS解决跨域问题有三种方式：Jsonp，postMessage，CORS
前端：Jsonp
后端：CORS
jsonp跨域
前端发送请求
后端配合回调函数
好处：
javascript 兼容性比较好
不需要服务器支持，直接在本地运行
缺点：
它只支持GET请求而不支持POST等其它类型的HTTP请求
它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
jsonp在调用失败的时候不会返回各种HTTP状态码。
安全性。万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的
// var script = document.createElement("script");
// var url =
// "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=游戏王&cb=show";百度
// var url = "http://suggest.taobao.com/sug?code=utf-8&q=男装&callback=cb";
// var url = "http://localhost/work823/work练习.php?cb=show";
// script.src = url;
// document.body.appendChild(script);
// function show(data) {
// console.log(data);
// }
CORS跨域
php页面配置请求内容
header('Access-Control-Allow-Origin:http://www.abc.com'); // 允许一个访问
header('Access-Control-Allow-Origin:*'); // 允许所有访问
echo '您已经访问成功';
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get", "http://localhost/work823/work练习.php", false);
xhr.send();
if (xhr.readyState == 4 && xhr.status == 200) {
var text = xhr.responseText;
var textjson = JSON.parse(text);
console.log(textjson);
}
