52 lines
936 B
Plaintext
52 lines
936 B
Plaintext
ajax: 是一种无刷新（局部刷新）的前后端数据交互的方式
|
||
|
||
前端分离：
|
||
|
||
前端
|
||
|
|
||
|
|
||
ajax
|
||
|
|
||
|
|
||
后端
|
||
|
||
原生js里面就支持
|
||
|
||
|
||
同源策略
|
||
|
||
1：域名相同
|
||
2：协议相同(http 80，https: 443)
|
||
3：端口相同
|
||
|
||
请求跨域：Access-Control-Allow-Origin
|
||
|
||
这三个只要有一个不相同，那么你的请求就发不出去
|
||
|
||
前端：http://localhost:63343/2020-12-28/ajax.html
|
||
后端：http://127.0.0.1:3000/api/json/index
|
||
|
||
三种解决：浏览器跨域
|
||
|
||
1：后端设置cors请求头(Access-Control-Allow-Origin)来解决
|
||
由后端解决！！！
|
||
header("Access-Control-Allow-Origin", "*");
|
||
|
||
2：js资源文件请求绕过浏览器限制 （jsonp）不是ajax请求
|
||
回调
|
||
|
||
<script>
|
||
function getData(res) {
|
||
console.log(res)
|
||
}
|
||
</script>
|
||
<script src="http://127.0.0.1:3000/api/json/test?call=getData"></script>
|
||
|
||
3：后端代理实现绕过浏览器
|
||
|
||
A --- C
|
||
|
||
A -- B
|
||
B -- C
|
||
|