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跨域请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！