04 【跨域初识】
1.同源策略
- 同源策略(Same-Origin Policy)最早由Netscape 公司提出，是浏览器的一种安全策略
- 同源： 协议、域名、端口号必须完全相同
- 跨域： 违背同源策略就是跨域
2.如何解决跨域
2.1 JSONP
jsonp只支持get请求不支持post请求
1) JSONP 是什么
JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明
才智开发出来，只支持get 请求。
2) JSONP 怎么工作的？
在网页有一些标签天生具有跨域能力，比如：img link iframe script。
JSONP 就是利用script 标签的跨域能力来发送请求的。
3) JSONP 的使用
html代码
//1. 创建 script 标签const script = document.createElement('script');//2. 设置标签的 src 属性script.src = 'http://127.0.0.1:8000/check-username?callback=abc';//3. 将script 添加到body 中document.body.appendChild(script);function abc(data) {alert(data.name);};
nodejs 代码
app.get("/check-username" , function (req , res) {var callback = req.query.callback;const data = {name: '孙悟空'};//将数据转化为字符串let str = JSON.stringify(data);//返回结果(一段可执行的JavaScript代码)response.end(`handle(${str})`);
});
2.2 CORS
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
-
CORS 是什么？
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方
案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持
get 和post 请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些
源站通过浏览器有权限访问哪些资源 -
CORS 怎么工作的？
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应
以后就会对响应放行。 -
CORS 的使用
主要是服务器端的设置：
router.get("/testAJAX" , function (req , res) {//通过res 来设置响应头，来允许跨域请求//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");res.set("Access-Control-Allow-Origin","*");//允许所有来源访问res.send("testAJAX 返回的响应");
});
