node.js中跨域请求实现方法详解_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请求成功')
        }
      })
})