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 RESTful API的示例

    实现一个完整的Node.js RESTful API的示例

    本篇文章主要介绍了实现一个完整的Node.js RESTful API的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • nodejs中Express与Koa2对比分析

    nodejs中Express与Koa2对比分析

    提到Node.js开发,不得不提目前炙手可热的2大框架express和koa。Express诞生已有时日,是一个简洁而灵活的web开发框架,使用简单而功能强大。Koa相对更为年轻,是Express框架原班人马基于ES6新特性重新开发的敏捷开发框架,现在可谓风头正劲,大有赶超Express之势。
    2018-02-02
  • node.js制作一个简单的登录拦截器

    node.js制作一个简单的登录拦截器

    本文给大家分享的是使用node.js制作一个简单的登录拦截的思路及代码,有需要的小伙伴可以参考下
    2020-02-02
  • 使用Express处理请求和托管静态资源方式

    使用Express处理请求和托管静态资源方式

    这篇文章主要介绍了使用Express处理请求和托管静态资源方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 使用Nodejs编写一个脚本实现markdown转pdf功能

    使用Nodejs编写一个脚本实现markdown转pdf功能

    Markdown 是一种轻量级的标记语言,非常适合用来写作和记录,将 Markdown 转换为 PDF 可以让文档在格式和样式上更加统一,也方便在不同设备和平台上查看和打印,在接下来的内容中我们将讲解如何使用 NodeJs 编写一个 Markdown 转 PDF 的脚本来实现我们这个想要的功能
    2024-05-05
  • Node.js中同步和异步编程的区别及使用方法

    Node.js中同步和异步编程的区别及使用方法

    在Node.js中,同步和异步编程是两种不同的处理方式。同步方式会阻塞程序的执行,而异步方式则不会。通过掌握它们的区别和使用方法,可以更好地实现程序的性能优化和功能扩展。同时,需要注意异步编程中的回调地狱问题,使用Promise可以更好地处理异步编程
    2023-05-05
  • 通过nodejs 服务器读取HTML文件渲染到页面的方法

    通过nodejs 服务器读取HTML文件渲染到页面的方法

    今天小编就为大家分享一篇通过nodejs 服务器读取HTML文件渲染到页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-05-05
  • node.js 使用process.argv获取和处理命令行参数的操作

    node.js 使用process.argv获取和处理命令行参数的操作

    process.argv是Node.js中用于获取命令行参数的数组,基本使用方法是通过命令行传递参数并在脚本中访问这些参数,参数可以根据需求进行处理,也可以使用第三方库如minimist或yargs来简化参数解析,这些工具可以帮助开发者有效地管理和使用命令行参数,提高脚本的灵活性和功能性
    2024-10-10
  • node.js+jQuery实现用户登录注册AJAX交互

    node.js+jQuery实现用户登录注册AJAX交互

    本篇文章主要介绍了用Node.js当作后台、jQuery写前台AJAX代码实现用户登录和注册的功能的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • Node.js实现爬取网站图片的示例代码

    Node.js实现爬取网站图片的示例代码

    本文将利用Node.js开发一个小示例—爬取某图片网站的图片,文中涉及的知识点有https模块、cheerio模块、fs模块和闭包,感兴趣的可以了解一下
    2022-04-04

最新评论