Nodejs如何解决跨域(CORS)

更新时间：2023年01月17日 15:51:44 作者：我的demo不烂尾

这篇文章主要介绍了Nodejs如何解决跨域(CORS)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

Nodejs解决跨域(CORS)

前后端分离的大环境下，受制于同源策略，我们需要懂得实现CORS（Cross-Origin Resource Sharing）

手动配置

在nodejs中，req 和 res 参数在中间件间都指向同一对象，这样我们就可以在头中间件中修改res 的header。如下：

const express = require('express')
 
const app = express();
 
app.use((req, res) => {
    //在这里手动配置
    res.header('Access-Control-Allow-Origin', 'example.com');
})

CORS模块

我们也可以通过引入cors模块快速配置。

npm i cors --save   //不是node的内置模块，需要先下载

const express = require('express')
const cors = require('cors')
 
const app = express();
 
const corsConfig = {
  origin:'http://localhost:8080',
  credentials:true,
}
//使用默认
app.use(cors())
//或修改默认配置
app.use(cors(corsConfig))

axios

值得注意的一点是cors模块会将 Access-Control-Allow-Origin 默认配为 *，但是axios不接受通配符*。而且axios还需要 Access-Control-Allow-Credentials 属性为true。

Credentials我们可以手动配置，Access-Control-Allow-Origin 我们可以如下配置：

const express = require('express')
const cors = require('cors')
 
const app = express();
 
//使用默认
app.use(cors())
   .use((req, res, next) => {
        console.log(req);
        res.setHeader('Access-Control-Allow-Origin',req.origin),
        next()
    })
//req.origin是网关地址 如：http://192.168.1.1

注意：本地调试的时候axios不认为 localhost:8080 等于127.0.0.1:8080

Nodejs CORS跨域问题

在响应头里设置：'Access-Control-Allow-Origin': '*'

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cors</title>
</head>

<body>
    <script>
    	// 请求地址
        fetch('http://localhost:3000/api/data')
        	// 请求体解析
            .then(res => res.json())
            // 获得数据
            .then(result => console.log(result))
    </script>
</body>

</html>

server.js

const http = require('http');
const libUrl = require('url')

http.createServer((req, res) => {
    const url = libUrl.parse(req.url, true);

    if (url.pathname === '/favicon.ico') return;

    if (url.pathname === '/api/data') {
        res.writeHead(200, {
            'Content-Type': 'Application/json',
            // 设置允许所有端口访问
            'Access-Control-Allow-Origin': '*'
        });
        let obj = {
            name: '张三',
            age: 20,
            sex: '男'
        };
        res.write(JSON.stringify(obj));
    }
    res.end();
}).listen(3000)

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

node.js命令行教程图文详解
本文先介绍原生的node.js实现命令行交互，了解原生的api,然后通过commander.js和inquirer.js实现一个完整的交互命令行工具。感兴趣的朋友跟随小编一起看看吧
2019-05-05
使用Nodejs编写一个脚本实现markdown转pdf功能
Markdown 是一种轻量级的标记语言,非常适合用来写作和记录,将 Markdown 转换为 PDF 可以让文档在格式和样式上更加统一,也方便在不同设备和平台上查看和打印,在接下来的内容中我们将讲解如何使用 NodeJs 编写一个 Markdown 转 PDF 的脚本来实现我们这个想要的功能
2024-05-05
node.js与vue cli脚手架的下载安装配置方法记录
这篇文章主要给大家介绍了关于node.js与vue cli脚手架的下载安装配置方法,文中通过实例代码以及图文介绍的非常详细,对大家学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-01-01
socket.io学习教程之基本应用（二）
socket.io提供了基于事件的实时双向通讯，下面这篇文章主要给大家介绍了socket.io基本应用的相关资料，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-04-04
浅谈Express异步进化史
本篇文章主要介绍了浅谈Express异步进化史，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
优化Node.js Web应用运行速度的10个技巧
这篇文章主要介绍了优化Node.js Web应用运行速度的10个技巧,本文讲解了从并行、异步、缓存、gzip 压缩、客户端渲染等等技巧,需要的朋友可以参考下
2014-09-09
Node.js静态服务器的实现方法
这篇文章主要介绍了Node.js静态服务器的实现方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2018-02-02
node.js中的fs.readSync方法使用说明
这篇文章主要介绍了node.js中的fs.readSync方法使用说明,本文介绍了fs.readSync方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
2014-12-12
Koa2中间件的作用及路由实现实例详解
这篇文章主要介绍了Koa2中间件的作用及路由实现实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
Node.js学习之TCP/IP数据通讯(实例讲解)
下面小编就为大家带来一篇Node.js学习之TCP/IP数据通讯(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10