56 lines
1.8 KiB
HTML
56 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title> ajax 跨域 </title>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
|
||
<script>
|
||
// ajax 跨域
|
||
// 导致的原因：浏览器的 [ 同源策略 ] 规则
|
||
// 作用：为了保护后端api接口
|
||
|
||
// 同源策略 规则：
|
||
// 会检查你的前端的访问地址和ajax将要访问的接口地址 是否一致？
|
||
|
||
// 前端：http://127.0.0.1:5500/2019-05-05/ajax.html
|
||
// 后端：http://127.0.0.1:9999/api/v1.0/index
|
||
|
||
// 怎么检查？
|
||
|
||
// 1: 协议是否完全相同 (http协议 默认端口80，https协议 默认端口 443)
|
||
// 2: 域名是否完全相同
|
||
// 3: 端口是否完全相同
|
||
|
||
// 是否完全一致，只要有一个不一致，那么就会导致跨域，浏览器报错信息如下：
|
||
|
||
// Access-Control-Allow-Origin
|
||
|
||
// 解决跨域
|
||
|
||
// 1: 后端允许跨域(CORS)
|
||
// 2: jsonp 跨域 披着羊皮骗过保安
|
||
// 原理
|
||
// 1: 浏览器只会去拦截ajax请求，但是不会拦截资源文件请求(js,css,html,img,font,mp4)
|
||
// 实现
|
||
// 发请求：前端使用 script 文件请求绕过浏览器的安全检查，发送函数名给后端
|
||
// 接受数据：后端接受函数名，然后调用函数把数据传递给前端
|
||
|
||
// 3: 服务端代理
|
||
// A(自己的前端) ---> C(别人的后端) 跨域
|
||
|
||
// A(自己的前端) ---> B(自己的后端) 也存在跨域，但是可以设置 CORS
|
||
|
||
// B(自己的后端) ---> C(别人的后端) 完全访问
|
||
|
||
// C(别人的后端) --数据---> B(自己的后端) --数据---> A(自己的前端)
|
||
|
||
|
||
</script>
|
||
</body>
|
||
</html> |