同源策略和解决跨域

• 跨域相关
• • 1.同源策略
  • 2.解决跨域
  • • 2.1JAONP
    • 2.2CORS

同源策略（Same-Origin Policy）最早由 Netscape 公司提出，是浏览器的一种安全策略

同源：协议、域名、端口号必须完全相同，违背同源策略就是跨域

1. JSONP是什么

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

2. JSONP怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script

比如我们之前引入过，并没有报错，可以使用

JSONP 就是利用 script 标签的跨域能力来发送请求的

我们在 HTML 里加入以下内容

app.js 代码

const data = {
    name: 'JSONP'
};
handle(data);

我们使用live-server服务启动项目后，可以获取到app.js对应的 HTTP 地址

我们替换下app.js的 src 地址

我们是不是可以将这个script脚本的 src 地址看成是服务端的方法地址？

不就是跟之前引入的jQuery和axios的 src 地址类似么，既然如此我们当然可以在服务端编写一个路由规则

app.all('/server-jsonp', (request, response) => {
    response.send('hello jsonp'); 
});

控制台报错

Uncaught SyntaxError: Unexpected identifier

但是查看下网络响应体信息，实际上是获取到的

因为script标签需要的是一个 JS 脚本代码，而现在获取到的却是一串字符，是无法进行解析的

所以我们需要修改服务端响应内容

const data = {
    name: 'JSONP'
};
let str = JSON.stringify(data);
// end 方法不会有特殊响应头
// 为了方便拼接，用模板字符串
response.end(`handle(${str})`); // 返回结果是一个函数调用

这次内容正常呈现，查看控制台没有报错信息，而且请求内容是我们编写的一串 JS 代码

3. JSONP的使用

HTML 代码

用户名：

服务端代码

app.all('/check-username', (request, response) => {
    const data = {
        exist: 1,
        msg:'用户名已存在'
    };
    let str = JSON.stringify(data);
    response.end(`handle(${str})`); 
});

效果

4. jQuery 发送 JSONP 请求

$.getJSON(url,[data],[fn])

● url：发送请求地址
● data：待发送 key/value 参数
● callback：载入成功时回调函数

HTML 代码

点击发送请求

服务端代码

app.all('/server-jsonp-jquery', (request, response) => {
    const data = {
        exist: 1,
        msg:'用户名已存在'
    };
    let str = JSON.stringify(data);
    response.end(`(${str})`);
});

此时并没有任何输出，但是请求参数中自动生成了一个callback的参数

因为我们现在是通过live-server服务的5500端口访问的nodemon服务的8000端口，也就是说现在是跨域访问

所以需要返回一个 JS 脚本代码，但是我们就需要一个字符串作为返回结果啊，怎么办呢？

按照jsonp原生代码思路，我们是一定要返回一个 JS 脚本代码的

那么callback参数就排上用场了，我们需要改造下服务端代码

// 接收callback参数
var cb = request.query.callback;
response.end(`${cb}(${str})`);

效果

我们可以看到响应体内容已经自动获取了callback参数和服务端返回结果

官网地址：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
1. CORS是什么？
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
2. CORS怎么工作的？
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行
3. CORS的使用

HTML 代码

点击发送请求






服务端代码

app.all('/server-cors', (request, response) => {

    response.send('Hello cors');

});

效果

我们要想进行跨域请求，必须在服务端返回结果时设置允许跨域的响应头

// 设置响应头，允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');

除此之外，还有一些 HTTP 响应首部字段
4. HTTP 响应首部字段

我们一般这么使用，允许跨域、带有自定义头部信息、任意方法

response.setHeader("Access-Control-Allow-Origin", "*"); 

response.setHeader("Access-Control-Allow-Headers", "*"); 

response.setHeader("Access-Control-A1low-Method", "*");