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的特点详解

    Node.js的特点详解

    本文主要对Node.js的特点进行详细介绍。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • Node.js创建一个Express服务的方法详解

    Node.js创建一个Express服务的方法详解

    这篇文章主要介绍了Node.js创建一个Express服务的方法,结合实例形式分析了node.js创建Express服务的具体步骤、实现方法及相关操作技巧,需要的朋友可以参考下
    2020-01-01
  • Node.js 回调函数实例详解

    Node.js 回调函数实例详解

    这篇文章主要介绍了Node.js 回调函数实例详解的相关资料,需要的朋友可以参考下
    2017-07-07
  • 轻松创建nodejs服务器(6):作出响应

    轻松创建nodejs服务器(6):作出响应

    这篇文章主要介绍了轻松创建nodejs服务器(6):作出响应,我们接着改造服务器,让请求处理程序能够返回一些有意义的信息,需要的朋友可以参考下
    2014-12-12
  • 详解NODEJS的http实现

    详解NODEJS的http实现

    这篇文章主要介绍了详解NODEJS的http实现的技术过程以及详细分析,需要的朋友学习参考下吧。
    2018-01-01
  • yarn 命令死循环问题分析解决

    yarn 命令死循环问题分析解决

    这篇文章主要为大家介绍了yarn 命令死循环问题分析解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 14款NodeJS Web框架推荐

    14款NodeJS Web框架推荐

    这篇文章主要介绍了14款NodeJS Web框架推荐,其中大多数框架都是基于node.js的Express实现,需要的朋友可以参考下
    2014-07-07
  • nodejs 的 session 简单使用

    nodejs 的 session 简单使用

    session 不用多介绍,使一个http可以对应一个终端用户,需要的朋友可以参考下。
    2016-06-06
  • express的中间件basicAuth详解

    express的中间件basicAuth详解

    这篇文章主要介绍了node.js中express的中间件basicAuth的使用方法,需要的朋友可以参考下
    2014-12-12
  • node.js中的fs.write方法使用说明

    node.js中的fs.write方法使用说明

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

最新评论