node.js express cors解决跨域的示例代码

 更新时间:2023年12月13日 09:56:01   作者:SuppperSA  
在Web开发中,当一个网页的源与另一个网页的源不同时,就发生了跨域,本文就来介绍一下node.js express cors解决跨域的示例代码,具有一定的参考价值,感兴趣的可以了解一下

什么是跨域

跨域(Cross-Origin)是指在 Web 开发中,当一个网页的源(Origin)与另一个网页的源不同时,就发生了跨域。同源策略(Same-Origin Policy)是浏览器的一项安全策略,限制了一个源下的文档或脚本如何能与另一个源下的资源进行交互。

同源是指两个 URL 具有相同的协议(http/https)、主机(domain)和端口(port)。如果这两个URL的这三个部分中任何一个不同,就被认为是不同源即跨域。

示例

开启一个node服务,服务地址为http://127.0.0.1:3000

postman请求

postman对服务发起post登录请求

请求成功。postman不受跨域影响,原因主要是因为postman是一个独立的桌面应用程序,而不是运行在浏览器中的 Web 应用。

前端请求

开启一个前端项目服务,比如vue

发起登录请求

<script setup>
  import axios from 'axios'
  const authLogin = async () => {
    try {
      const { data } = await axios.post('http://127.0.0.1:3000/api/v1/users/login', {
        "email": "adasdasasda1@qq.com",
        "password": "pass1234"
      })
    } catch (error) {
      throw new Error(error)
    }
  }
</script>

<template>
  <main>
    <button @click="authLogin">sign</button>
  </main>
</template>

浏览器跨域报错

cors中间件解决跨域

流程

1、安装cors依赖

npm i cors

2、引入依赖

const cors = require('cors');

3、注册中间件

全局注册cors中间件

app.use(cors());

 或为某个路由注册cors中间件

router.post('/path', cors(), controller);

vue服务进行post请求

请求成功,看到响应头Access-Control-Allow-Origin为*, 为cors的默认设置

配置cors参数

const corsOptions = {
  origin: 'http://192.168.110.61:5173',
  //...
};

app.use(cors(corsOptions));

origin: 允许访问资源的特定源

通过查阅github文档查看其他配置

GitHub - expressjs/cors: Node.js CORS middleware

用cors中间件配置同以下

app.all("*", (req, res, next) => {
    //设置允许跨域的域名,*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin", "http://192.168.110.61:5173");
})

到此这篇关于node.js express cors解决跨域的示例代码的文章就介绍到这了,更多相关express cors跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • node.js中的events.emitter.removeAllListeners方法使用说明

    node.js中的events.emitter.removeAllListeners方法使用说明

    这篇文章主要介绍了node.js中的events.emitter.removeAllListeners方法使用说明,本文介绍了events.emitter.removeAllListeners 的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • 使用Node.js实现RESTful API的示例

    使用Node.js实现RESTful API的示例

    Node.js可以用很少代码简单地实现一个Web服务,并且它有一个非常活跃的社区,通过Node出色的包管理机制(NPM)可以非常容易获得各种扩展支持。 对简单的应用场景Node.js实现REST是一个非常合适的选择。 本文介绍如何用Node.js实现REST服务。
    2017-08-08
  • 如何在node.js中使用​JsonWebToken模块进行token加密

    如何在node.js中使用​JsonWebToken模块进行token加密

    目前在web框架中最流行的身份验证是使用jsonwebtoken,简称jwt.可以设置加密方式,过期时间,存放个人信息,逆解析,下面这篇文章主要给大家介绍了关于如何在node.js中使用​JsonWebToken模块进行token加密的相关资料,需要的朋友可以参考下
    2023-03-03
  • nodejs对express中next函数的一些理解

    nodejs对express中next函数的一些理解

    这篇文章主要介绍了nodejs对express中next函数的一些理解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 如何将Node.js中的回调转换为Promise

    如何将Node.js中的回调转换为Promise

    这篇文章主要给大家介绍了关于如何将Node.js中的回调转换为Promise的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • nodejs调用cmd命令实现复制目录

    nodejs调用cmd命令实现复制目录

    本文给大家介绍的是如何在nodejs中调用CMD命令,从而实现目录的复制,非常的实用,有需要的小伙伴可以参考下。
    2015-05-05
  • nodejs事件的监听与触发的理解分析

    nodejs事件的监听与触发的理解分析

    这篇文章主要介绍了nodejs事件的监听与触发的理解分析,以实例形式对比分析了nodejs与jQuery关于事件监听的实用技巧,有助于加深对nodejs的理解,需要的朋友可以参考下
    2015-02-02
  • 轻松创建nodejs服务器(7):阻塞操作的实现

    轻松创建nodejs服务器(7):阻塞操作的实现

    这篇文章主要介绍了轻松创建nodejs服务器(7):阻塞操作的实现,本文先是组出了代码,然后对代码一一分析,需要的朋友可以参考下
    2014-12-12
  • 利用Mongoose让JSON数据直接插入或更新到MongoDB

    利用Mongoose让JSON数据直接插入或更新到MongoDB

    这篇文章主要给大家介绍了利用Mongoose让JSON数据直接插入或更新到MongoDB数据库的相关资料,文中详细介绍了配置Mongoose、创建目录及文件、插入数据,POST提交JSON增加一条记录以及询数据,取出刚增加的记录等内容,需要的朋友可以参考下。
    2017-05-05
  • 监控Nodejs的性能实例代码

    监控Nodejs的性能实例代码

    这篇文章主要介绍了监控Nodejs的性能实例代码,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07

最新评论