当前位置: 首页 > news >正文

node.js中跨域请求有几种实现方法

默认情况下,出于安全考虑,浏览器会实施同源策略,阻止网页向不同源的服务器发送请求或接收来自不同源的响应。

同源策略:协议、域名、端口三者必须保持一致

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
</head>
<body><button id="btnGet">get请求</button><button id="btnPost">post请求</button><script>$('#btnGet').on('click', function(){console.log('点击get请求')$.ajax({type: 'GET',url: 'http://127.0.0.1:3000/api/get',data: {name: 'lbj',number: 23},success: (res) =>{console.log(res, 'get请求成功')}})})$('#btnPost').on('click', function(){console.log('点击post请求')$.ajax({type: 'POST',url: 'http://127.0.0.1:3000/api/post',data: {name: 'lbj',number: 23},success: (res) =>{console.log(res, 'get请求成功')}})})</script>
</body>
</html>

在这里插入图片描述

常见的解决跨域请求的方法

  • CORS(跨源资源共享)
  • JSONP
  • 代理服务器
  • Nginx反向代理

CORS的实现原理

CORS的核心原理是通过在HTTP响应头中添加特定的CORS相关字段,告诉浏览器哪些域名是被允许的,从而解决跨域请求的问题。这些字段包括:

Access-Control-Allow-Origin:指定允许访问的域名。可以是单个域名,也可以是逗号分隔的多个域名,或者使用通配符*表示允许所有域名访问。
Access-Control-Allow-Methods:指定允许的HTTP方法。例如,GET、POST等。
Access-Control-Allow-Headers:指定允许的HTTP头部。例如,Content-Type等。
Access-Control-Allow-Credentials:表示是否允许发送包含凭据的请求,如Cookie。默认情况下,不发送凭据。
Access-Control-Expose-Headers:指定哪些HTTP头部可以被浏览器访问。

CORS实现方法

// 安装中间件
// npm install cors
// 导入中间件
const cors = require('cors')
// 配置中间件,要在路由之前
app.use(cors())

在这里插入图片描述

CORS的优缺点

优点:
标准化:CORS是W3C标准,被广泛支持。
灵活性:可以通过配置允许特定的源、方法和头。
安全性:可以明确指定哪些资源可以被跨域访问。
缺点:
配置复杂性:需要仔细配置CORS策略,以确保安全性和功能性。
浏览器兼容性:虽然现代浏览器都支持CORS,但某些旧版本浏览器可能不支持或支持不完全。

jsonp的实现方法

JSONP是一种通过script标签的src属性来实现跨域请求的技术。由于script标签不受同源策略的限制,因此可以加载不同源的脚本。JSONP通常用于GET请求。

jsonp的优缺点

优点:
兼容性:JSONP在旧版本浏览器中也被广泛支持。
简单易用:实现起来相对简单,不需要额外的中间件或配置。缺点:
安全性:JSONP存在安全风险,因为它允许跨域执行脚本。
局限性:只支持GET请求,不支持POST等其他HTTP方法。

jsonp的实现

// html
<button id="btnJsonp">jsonp请求</button>
// javascript
$('#btnJsonp').on('click', function(){console.log('点击jsonp请求')$.ajax({method: 'GET',url: 'http://127.0.0.1:3000/api/jsonp',dataType: 'jsonp', success: (res) =>{console.log(res, 'jsonp请求成功')}})
})
// 服务端
router.get('/jsonp', (req, res)=>{// 获取客户端发送过来的回调函数的名字const funcName = req.query.callback;// 发送给客户端的数据const data = {name: 'lbj', number: 23}// 拼接函数回调的字符串const str = `${funcName}(${JSON.stringify(data)})`res.send(str)
})

在这里插入图片描述

代理服务器

实现方式:代理服务器充当客户端和目标服务器之间的中介。客户端向代理服务器发起请求,代理服务器再将请求转发给目标服务器,并将响应返回给客户端。通过这种方式,可以绕过浏览器的同源策略。

优点:
灵活性:可以处理各种跨域请求,包括POST等HTTP方法。
安全性:可以通过代理服务器进行身份验证和授权。
缺点:
实现复杂性:需要设置和维护代理服务器。
性能影响:代理服务器可能会增加请求延迟和带宽消耗。

Nginx反向代理

实现方式:通过Nginx配置反向代理,将跨域请求转发到Node.js应用。

优点:
性能:Nginx是一个高性能的HTTP服务器和反向代理服务器。
安全性:可以通过Nginx进行SSL/TLS加密和身份验证。
缺点:
配置复杂性:需要熟悉Nginx的配置和管理。
依赖性:需要额外的Nginx服务器。


http://www.mrgr.cn/news/79394.html

相关文章:

  • 智慧商城项目(vue核心技术与实战)
  • 进入保护模式
  • 【Linux】防火墙
  • 代码随想录算法训练营day50|动态规划12
  • Codeforces Round 991 (Div. 3)
  • 【C语言】C语言的变量和声明系统性讲解
  • 重磅更新:CnosDB 2.3.5.4 版本上线, 性能提升,问题修复一网打尽
  • 吉他初学者学习网站搭建系列(9)——如何用coze做一个网站助手
  • 事件循环(eventloop)
  • PySpark3.4.4_基于StreamingContext实现网络字节流中英文分词词频累加统计结果保存到数据库中
  • 游戏引擎学习第36天
  • Spring事务实现原理
  • 公共云提供商正在错失人工智能机遇
  • Linux 进程 ID(PID)查看 / 获取
  • 在做题中学习(77):快排
  • 万物可爬(以爬取浏览器井盖图片和豆瓣电影名字为例)
  • Next.js 系统性教学:构建应用的路由与页面管理
  • jeecg-uniapp 跨域问题解决方法记录
  • Let up bring up a linux.part2 [十一]
  • Codeforces Round 991 (Div. 3) F. Maximum modulo equality(区间gcd模板)