Node.js之跨域和yarn小技巧

跨域

同源策略

编程中的同源，比较的是两个url是否同源。

主要看下面三个方面：

• 协议是否相同（http https file）
• 主机地址是否相同（www.xxx.com 127.0.0.1）
• 端口（0~65535）（http默认端口是80；https默认端口是443；MySQL默认端口3306）

协议、主机地址、端口组成一个“源”。

如果两个url的协议、主机地址、端口都相同，那么这两个url是同源的，否则就是非同源。

如果非同源，那么以下三种行为会受到限制：

• Cookie 无法操作
• DOM 无法操作
• Ajax请求无效（请求可以发送，服务器也会处理这次请求，但是响应结果会被浏览器拦截）

违反了同源策略的请求，叫做跨域请求。

解决跨域

主流的方案有两种：分别是JSONP和CORS.

CORS

由于XHR对象被W3C标准化之后，提出了很多XHR Level2的新构想，其中新增了很多新方法（onload、response....）和CORS跨域资源共享。浏览器升级后开始支持CORS方案，从IE10开始支持。

CORS方案，就是通过服务器设置响应头来实现跨域。

CORS才是解决跨域的真正解决方案。

• 前端需要做什么？

  • 无需做任何事情，正常发送Ajax请求即可。

• 后端需要做什么？

  • 需要加响应头 。或者使用第三方模块 cors 。

JSONP

是程序员被迫想出来的解决跨域的方案。

JSONP方案和Ajax没有任何关系

JSONP方案只支持GET请求

JSONP没有浏览器兼容问题，任何浏览器都支持。

• 原理

  • 客户端利用 script 标签的 src 属性，去请求一个接口，因为src属性不受跨域影响。
  • 服务端响应一个字符串
  • 客户端接收到字符串，然后把它当做JS代码运行。

  后端接口代码：

  app.get('/api/jsonp', (req, res) => {
    // res.send('hello');
    // res.send('console.log(1234)');
    // res.send('abc()')
    // res.send('abc(12345)')
  ​
    // 接收客户端的函数名
    let fn = req.query.callback;
    let obj = { status: 0, message: '登录成功' };
    let str = JSON.stringify(obj);
    res.send(fn + `(${str})`);
  });
  

  前端代码：

  <script>
    // 提前准备好一个函数
    function xxx(res) {
      console.log(res)
    }
  ​
  </script>
  ​
  <script src="http://localhost:3006/api/jsonp?callback=xxx"></script>
  

• 前端需要做什么？

  • 如果使用jQuery，$.ajax({ dataType: 'jsonp' })，必须指定dataType选项为jsonp即可

• 后端需要做什么？

  • 如果使用express，那么直接调用 res.jsonp(数据) 即可。

小结

方案	前端	后端
CORS	×	设置响应头
JSONP（原生）	1. 准备一个函数；2. 使用script的src发送请求	响应函数调用
JSONP（jQuery）	1. 还是调用$.ajax()；2. 必须指定dataType: 'jsonp'	res.jsonp(数据)

yarn包管理器

快速、可靠、安全的依赖管理工具。(类似npm作用)

中文官网地址: yarn.bootcss.com/

下载yarn

下载地址: yarn.bootcss.com/docs/instal…

sudo npm i -g yarn

如果上面不行, 试试这个

curl -o- -L https://yarnpkg.com/install.sh | bash

使用yarn

与npm类似, 可以试试, 新建一个空白文件夹, 执行以下命令尝试一下

# 1. 初始化, 得到package.json文件(终端路径所在文件夹下)
yarn init
# 类似: npm init
​
# 2. 添加依赖(下包)
# 语法: yarn add [package]
# 语法: yarn add [package]@[version]
yarn add jquery
yarn add jquery@3.5.1
# 类似: npm install jquery
​
# 3. 移除包
# 语法: yarn remove [package]
yarn remove jquery
# 类似: npm remove jquery
             
# 4. 安装项目全部依赖(一般拿到别人的项目时, 缺少node_modules)          
yarn
# 会根据当前项目package.json记录的包名和版本, 全部下载到当前工程中
# 类似: npm i
​
# 5. 全局
# 安装: yarn global add [package]
# 卸载: yarn global remove [package]
# 注意: global一定在add左边
yarn global add @vue/cli
# 如何使用, 为明天学习vue做铺垫
# 类似: npm install -g @vue/cli 

yarn可能遇到的问题

如果报错参考报错文档: lidongxuwork.gitee.io/error/#811

最后是原图