跨域
什么是跨域
当HTTP请求中的协议、域名、端口号任意一个不相同时，就在不同的域
在不同的域之间请求数据或资源，就叫"跨域"
它用于限制一个页面通过脚本访问另外一个页面的敏感数据，减少可能被攻击的媒介
跨域情况列举
- 协议
http与https不同 - 域名
http://www.test.com与http://www.code.com不同 - 端口
http://www.test.com:80与http://www.test.com:3000不同 - 二级域名
http://ttt.test.com与http://aaa.test.com不同 - 域名与对应IP
localhost与127.0.0.1不同
为什么域名对应IP会跨域：因为一个IP地址可以绑定多个域名，为了防止出错，所以也会跨域阻止访问
解决跨域方法
一、后台使用nginx配置反向代理
二、使用jsonp，缺点，jsonp只能使用GET请求
//jsonp.html
<script src="jquery.js"></script>
<script>
$.ajax({
url: "http://127.0.0.1:8000/JsoupData.js",
type: "GET",
jsonp: 'jsoncallback', //这个可以加也可以不加
dataType: 'jsonp',
//设置的jsonp回调函数名称，并把回调函数中数据取出来供success属性方法调用。如果没有设置jsonpCallback则继续调用原来的回调函数。默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
//jsonpCallback:"flightHandler",
success: function (data) {
console.log(data); //如果没有写jsonpCallback，则success并不会回调，只会调用err返回请求状态
},
error: function (err) {
console.info(err);
}
});
function myCallBack(data) { //jsonp执行成功的时候回调这个函数，所以success函数形同虚设了。
console.log("myCallBack");
console.log(data);
}
</script>
//JsoupData.js
var data = {
name: 'vicer',
age: 18
}
myCallBack(data);
请求时我们请求http://localhost:8000/jsonp.html，根据跨域举例最后一条，IP与对应域名请求会造成跨域。
但使用jsonp请求后发现可以正常调用myCallBack函数，请求成功。
三、在服务端增加CORS头
- 首先我们创建一个文件夹，我们命名header，文件夹内放入请求的数据和
.htaccess伪静态
.htaccess文件，这里设置允许所有请求
RewriteEngine on Header set Access-Control-Allow-Origin "*" data.json文件
{ "data":{ "name":"vicer", "age":18 } } - 跨域请求json文件
//cors.html <script src="jquery.js"></script> <script> $.ajax({ url: "http://127.0.0.1:8000/header/data.json", type: "GET", success: function (data) { console.log(data); }, error: function (err) { console.log(err); } }); </script> 接下来我们跨域请求http://localhost:8000/cors.html。
当我们配置好.htaccess文件后会自动应用到当前文件夹，成功打印出data.json的数据
单枪匹马你别怕，一腔孤勇又如何，这一路你可以哭，但不能怂！
—— Here are lovecode3000 ~
