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方法使用说明,本文介绍了events.emitter.removeAllListeners 的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下2014-12-12如何在node.js中使用JsonWebToken模块进行token加密
目前在web框架中最流行的身份验证是使用jsonwebtoken,简称jwt.可以设置加密方式,过期时间,存放个人信息,逆解析,下面这篇文章主要给大家介绍了关于如何在node.js中使用JsonWebToken模块进行token加密的相关资料,需要的朋友可以参考下2023-03-03利用Mongoose让JSON数据直接插入或更新到MongoDB
这篇文章主要给大家介绍了利用Mongoose让JSON数据直接插入或更新到MongoDB数据库的相关资料,文中详细介绍了配置Mongoose、创建目录及文件、插入数据,POST提交JSON增加一条记录以及询数据,取出刚增加的记录等内容,需要的朋友可以参考下。2017-05-05
最新评论