【node.js】跨域详解

【node.js】跨域详解

一、跨域是什么

跨域：本质是浏览器基于同源策略的一种安全手段

同源策略:是一种约定，他是浏览器最核心也最基本的安全功能

所谓同源，具有以下三个相同点：

• 协议相同
• 主机相同
• 端口相同

当以上三个有任意一项不同时，就会触发同源策略，就会产生跨域

我们会把触发了同源策略的请求，叫做跨域请求。

发送请求的服务器:http://127.0.0.1:2937/

请求目标的服务器:http://localhost:8888

上面两个服务器形成跨域

二、解决跨域的三种方法

1. **jsonp：**十多年前火爆前端的跨域解决方案，至今还在使用，这个方案和Ajax没有任何关系。
2. **cors：**7年前火爆前端的跨域解决方案，目前占据市场的45%，这个解决方案跟前端没有任何关系。
3. **代理(服务器代理)：**5年前火爆前端的跨域解决方案，目前占据前端的50%，使用node服务器来代理发送请求。上线后

三、jsonp

我们做ajax请求就是为了不刷新页面,把请求的数据渲染到指定位置–局部更新

现在我们的ajax对象被浏览器限制了,不能请求跨域了的服务器

怎么办呢?

有没有什么东西可以天生不被浏览器限制呢

img,video,audio,link,iframe,script标签

这些标签都可以帮助我们请求跨域服务器,跟ajax对象没有任何关系,跟浏览器同源策略没有任何关系
jsonp的原理就是利用了script标签不受浏览器同源策略的限制，然后和后端一起配合来解决跨域问题的。

解决思路：

• 在script标签的src属性请求这个地址,先确定先地址是否是js代码
• 通过src请求服务器，如果没有特殊说明，一般都会请求成功
• 只能是get请求，因为派生请求都是get

具体的实现就是在客户端创建一个script标签，然后把请求后端的接口拼接一个回调函数名称作为参数传给后端，并且赋值给script标签的src属性，然后把script标签添加到body中，当后端接收到客户端的请求时，会解析得到回调函数名称，然后把数据和回调函数名称拼接成函数调用的形式返回，客户端解析后会调用定义好的回调函数，然后在回调函数中就可以获取到后端返回的数据了。

四、cors

cors：前端和以前一样用ajax发送请求,但是不会再有跨域问题了

服务器需要设置允许跨域的响应头就可以了

如何设置呢？

方案1：用cors插件

1. 在我们的服务器代码里 npm i cors
2.  const cors = require('cors')
3. app.use(cors())

方案2：在后端服务器上书写可以允许哪些可以访问我的服务器

app.use(function(req,res,next){
            // req:表示请求对象
            // res:表示响应对象
            // next:表示下一步
            // *：通配符
            res.setHeader('Access-Control-Allow-Origin','*')//允许哪些域名请求我
            res.setHeader('Access-Control-Request-Methods','GET,POST,PUT,DELETE,OPTIONS')//允许哪些请求方式可以请求我
            res.setHeader('Access-Control-Allow-Headers','x-requested-with,content-type')//允许携带哪些请求头信息
            
            // **************上面的代码一写那么就等于这个服务器开启了跨域资源共享
            next()
        })
// 重启服务器就可以使用了

只要后端实现了cors,就实现了跨域。

五、proxy代理（服务器代理）

proxy====> 代理跨域

因为浏览器不允许请求一个非同源地址

注意:服务器与服务器之间请求数据并不会存在跨域行为，跨域行为是浏览器安全策略限制。

为了解决这个问题:

1、在浏览器同源的位置上设置一个代理服务器
2、请求服务器   发送请求给   代理服务器
3、代理服务器   转发请求给   目标服务器
4、目标服务器   返回响应给   代理服务器
5、代理服务器   转发响应给   请求服务器
6、请求服务器   给浏览器数据

设置代理服务器步骤：

1. 打开我的后端node代码
2. 下载代理请求的第三方插件 npm i http-proxy-middleware
3. 需要在后端代码中引入插件
4. 使用插件