前端请求方式（包括ajax、axios、跨域问题）
一、前端向后台发送请求有几种方式
1、 script标签的src属性(JSONP,只能发get请求)
2、 iframe（解决jsonp只发get问题，可以发post）
3、 ajax发送请求(asyn javascript and xml)
下面的不看先
4、 link标签的href属性
5、 img标签的src属性
6、 表单提交发送请求
7、 a标签的href发送请求
二、JSONP
、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；
2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如
————————————————
1
2
3
4
5
6
7
8
9
10
毫无疑问，页面将会弹出一个提示窗体，显示跨域调用成功。
2.2 函数调用
现在我们在jsonp.html页面定义一个函数，然后在远程remote.js中传入数据进行调用。
jsonp.html页面代码如下：
localHandler({"result":"我是远程js带来的数据"});
1
运行之后查看结果，页面成功弹出提示窗口，显示本地函数被跨域的远程js调用成功，并且还接收到了远程js带来的数据。很欣喜，跨域远程获取数据的目的基本实现了。
三、AJAX（重点）
实现Ajax的方式：
3.1 XMLHttpRequest （XHR）
XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。
//设置 result 的文本
result.innerHTML = xhr.response;
}
}
}
}
</script>
<div class="container">
<h2 class="page-header">jQuery发送ajax请求</h2>
<button class="btn btn-primary">GET</button>
<button class="btn btn-danger">POST</button>
<button class="btn btn-info">通用型方法ajax</button>
</div>
<script>
$('button').eq(0).click(function() {
//第一个参数是请求url，第二个参数是发送的参数，第三个参数是回调函数，其中的参数是响应体。
//第四个参数是响应体类型
$.get('http:127.0.0.1:8000/jquery-server', {a:100,b:200}, function(data){
console.log(data);
}, 'json');
});
$('button').eq(1).click(function() {
//第一个参数是请求url，第二个参数是发送的参数，第三个参数是回调函数，其中的参数是响应体
$.post('http:127.0.0.1:8000/jquery-server', {a:100,b:200}, function(data){
console.log(data);
});
});
$('button').eq(2).click(function() {
$.ajax({
//url
url: 'http:127.0.0.1:8000/jquery-server',
//参数
data: {a:100, b:200},
//请求类型
type: 'GET',
//响应体类型
dataType: 'json',
//成功的回调
success: function(data) {
console.log(data);
},
//超时时间
timeout: 2000,
//失败的回调
error: function() {
console.log("出错啦");
}
})
});
</script>
promise：https://blog.csdn.net/qq_24839991/article/details/79957949
<body> <button>GET</button> <button>POST</button> <button>AJAX</button> <script> const btns = document.querySelectorAll('button'); btns[0].onclick = function() { //配置baseURL axios.defaults.baseURL = 'http:127.0.0.1:8000'; //GET请求 axios.get('/axios-server', { //url参数 params: { id: 100, vip: 7 }, //请求头信息 headers: { name: 'atguigu', age: 20 } }); } </script> </body> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 这里看完再看看下面的同源策略然后再回来看看axios的官方说明
https://www.kancloud.cn/yunye/axios/234845
四、同源安全策略
同源安全策略 默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。
实现跨域方式：
1.jsonp
2.空iframe加form
3.CORS，跨域资源共享（Cross-origin resource sharing）
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
4.代理
————————————————
浙公网安备 33010602011771号