【跨域初识】

同源策略

  • 同源策略(Same-Origin Policy)最早由Netscape 公司提出，是浏览器的一种安全策略
  • 同源： 协议、域名、端口号必须完全相同
  • 跨域： 违背同源策略就是跨域

如何解决跨域

JSONP

jsonp只支持get请求不支持post请求

1) JSONP 是什么

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明
才智开发出来，只支持get 请求。

2) JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。
JSONP 就是利用script 标签的跨域能力来发送请求的。

3) JSONP 的使用

html代码

1
2
3
4
5
6
7
8
9
//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 代码

1
2
3
4
5
6
7
8
9
10
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})`);
});

CORS

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

  1. CORS 是什么？
    CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方
    案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持
    get 和post 请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些
    源站通过浏览器有权限访问哪些资源

  2. CORS 怎么工作的？
    CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应
    以后就会对响应放行。

  3. CORS 的使用
    主要是服务器端的设置：

1
2
3
4
5
6
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 返回的响应");
});
Fetch的概述和基本使用