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的核心原理
是通过在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的实现
<button id="btnJsonp">jsonp请求</button>
$('#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请求成功')
}
})
})
代理服务器
实现方式：代理服务器充当客户端和目标服务器之间的中介。客户端向代理服务器发起请求，代理服务器再将请求转发给目标服务器，并将响应返回给客户端。通过这种方式，可以绕过浏览器的同源策略。
优点：
灵活性：可以处理各种跨域请求，包括POST等HTTP方法。
安全性：可以通过代理服务器进行身份验证和授权。
缺点：
实现复杂性：需要设置和维护代理服务器。
性能影响：代理服务器可能会增加请求延迟和带宽消耗。
Nginx反向代理
实现方式：通过Nginx配置反向代理，将跨域请求转发到Node.js应用。
优点：
性能：Nginx是一个高性能的HTTP服务器和反向代理服务器。
安全性：可以通过Nginx进行SSL/TLS加密和身份验证。
缺点：
配置复杂性：需要熟悉Nginx的配置和管理。
依赖性：需要额外的Nginx服务器。
到此这篇关于node.js中跨域请求有几种实现方法的文章就介绍到这了,更多相关node.js跨域请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文详细讲解了Node.js中的HTTP请求与响应，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了node.js中的fs.unlinkSync方法使用说明,本文介绍了fs.unlinkSync的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下2014-12-12
最近一段时间在学习前端向服务器发送数据和请求数据,下面这篇文章主要给大家介绍了关于nodejs处理http请求实例详解之get和post的相关资料,需要的朋友可以参考下2023-01-01
在本篇文章里小编给大家分享的是一篇关于node.js事件轮询机制的相关知识点文章，有兴趣的朋友们可以参考下。2019-12-12
这篇文章主要介绍了三步教你用Node做一个微信哄女友神器（面向小白）,用node和wechaty微信网页接口开发的一款小工具,可以定时给女朋友发每天的天气情况,天气提醒,每日一句,通过配置机器人api后还可以实现微信机器人自动陪女朋友聊天,需要的朋友可以参考下2019-06-06
JSONP是一个跨域解决方案,本文主要介绍了Node.js使用JSONP接口的具体用法,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-03-03
这篇文章主要介绍了Node.js中看JavaScript的引用的相关资料,需要的朋友可以参考下2017-04-04
本篇文章主要介绍了nodejs实现OAuth2.0授权服务认证，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
node.js中 mysql 增删改查操作及async，await处理实例分析
这篇文章主要介绍了node.js中 mysql 增删改查操作及async，await处理,结合实例形式分析了node.js中 mysql库安装、增删改查操作及async，await处理相关实现技巧,需要的朋友可以参考下2020-02-02
让前端觉得如获神器的不是NodeJS能做网络编程,而是NodeJS能够操作文件,小至文件查找,大至代码编译,几乎没有一个前端工具不操作文件,换个角度讲,几乎也只需要一些数据处理逻辑,再加上一些文件操作,就能够编写出大多数前端工具2023-11-11
最新评论