广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Nodejs如何解决跨域(CORS)
  • 466
分享到

Nodejs如何解决跨域(CORS)

Nodejs跨域Nodejs解决跨域NodejsCORS 2023-01-17 18:01:35 466人浏览 独家记忆
摘要

目录nodejs解决跨域(CORS)手动配置CORS模块axiOSnodejs CORS跨域问题总结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)

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Nodejs如何解决跨域(CORS)

本文链接: https://www.lsjlt.com/news/178024.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Nodejs如何解决跨域(CORS)
    目录Nodejs解决跨域(CORS)手动配置CORS模块axiosNodejs CORS跨域问题总结Nodejs解决跨域(CORS) 前后端分离的大环境下,受制于同源策略,我们需要懂...
    99+
    2023-01-17
    Nodejs跨域 Nodejs解决跨域 Nodejs CORS
  • 解决Django cors跨域问题
    Django cors跨域问题 前后端分离项目中的跨域问题 即同源策略 同源策略:同源策略/SOP(Same origin policy)是一种约定,由 Netscape 公司 19...
    99+
    2022-11-12
  • Nginx如何解决前端跨域问题以及CORS跨域配置
    Nginx如何解决前端跨域问题以及CORS跨域配置,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。Nginx的CORS配置,网上太多这配置了,但大家更多的复制粘贴...
    99+
    2023-06-04
  • Django cors跨域问题怎么解决
    这篇文章主要介绍“Django cors跨域问题怎么解决”,在日常操作中,相信很多人在Django cors跨域问题怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Django&nb...
    99+
    2023-07-02
  • 详解Spring MVC CORS 跨域
    介绍跨域CORS,全称是"跨域资源共享"(Cross-origin resource sharing)当页面发出跨域请求时:简单请求(先简单理解为正常的get/post吧):浏览器将请求的地址添加到header的Origin里面发送请求。接...
    99+
    2023-05-31
    spring mvc cors
  • 详解springboot解决CORS跨域的三种方式
    目录一、实现WebMvcConfigurer接口二、实现filter过滤器方式三、注解@CrossOrigin四、实战五、cookie的跨域一、实现WebMvcConfigurer接...
    99+
    2022-11-13
  • 跨域(CORS)问题的解决方案分享
    目录前后端分离项目,如何解决跨域问题什么是跨域问题跨域问题演示及解决点击前端登录按钮覆盖默认的CorsFilter来解决该问题重新运行代码,点击登录按钮设置SpringSecurit...
    99+
    2023-02-13
    cors跨域问题 CORS跨域解决方案 CORS解决跨域的几种实现方式
  • springboot解决CORS跨域的方式有哪些
    这篇文章主要介绍“springboot解决CORS跨域的方式有哪些”,在日常操作中,相信很多人在springboot解决CORS跨域的方式有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”springboo...
    99+
    2023-07-02
  • Ajax解决跨域之设置CORS响应头实现跨域案例详解
    1.设置CORS响应头实现跨域 跨源资源共享(CORS) 1.1 什么是CORS CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS 是官...
    99+
    2022-11-12
  • 快速解决跨域请求问题:jsonp和CORS
    网上各种跨域教程,各种实践,各种问答,除了简单的 jsonp 以外,很多说 CORS 的都是行不通的,老是缺那么一两个关键的配置。本文只想解决问题,所有的代码经过亲自实践。本文解决跨域中的 get、post、data、cookie 等这些问...
    99+
    2023-05-30
    jsonp 跨域问题 cors跨域请求
  • jsonp和CORS跨域请求问题怎么解决
    这篇文章主要讲解了“jsonp和CORS跨域请求问题怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jsonp和CORS跨域请求问题怎么解决”吧!JSONPjsonp 的原理很简单,利...
    99+
    2023-06-02
  • 如何解决Spring boot 和Vue开发中CORS跨域问题
    这篇文章主要介绍如何解决Spring boot 和Vue开发中CORS跨域问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1. 遇到的问题:我用spring-boot 做Rest服...
    99+
    2022-10-19
  • Quarkus中filter过滤器跨域cors问题解决方案
    目录前言web依赖过滤器filter开发resteasy的filtervertx的filterQuarkus中的跨域前言 Quarkus中的web模块是基于java标准web规范ja...
    99+
    2022-11-13
  • Node.js基于cors解决接口跨域的问题(推荐)
    目录解决问题使用express编写get/post接口构造服务器并将接口写入在html页面中发起get/post请求:接口的跨域问题使用cors中间件解决跨域问题了解问题什么是COR...
    99+
    2022-11-13
    Node.js cors解决接口跨域 Node.js 接口跨域
  • Quarkus中filter过滤器跨域cors问题怎么解决
    本篇内容介绍了“Quarkus中filter过滤器跨域cors问题怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前言Quarkus中...
    99+
    2023-06-29
  • CORS(跨域资源共享)源验证失败解决方法
    在web系统中,安全软件扫描经常会发现CORS(跨域资源共享)作为高危漏洞出现。本文提供用Nginx作为反向代理的解决方案。解决方式是在nginx.conf文件中做如下配置: set $cors ""; if ($http_origin...
    99+
    2023-08-31
    服务器 前端 运维
  • 如何使用SpringCloudApiGateway支持Cors跨域请求
    本篇内容介绍了“如何使用SpringCloudApiGateway支持Cors跨域请求”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!问题背景...
    99+
    2023-06-20
  • Angular如何通过CORS实现跨域方案
    这篇文章给大家介绍Angular如何通过CORS实现跨域方案,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。就拿iframe来说作为一个前端工程师,我极为讨厌iframe这种东西.它不光...
    99+
    2022-10-19
  • vue如何解决跨域
    这篇文章给大家分享的是有关vue如何解决跨域的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代...
    99+
    2022-10-19
  • 基于CORS如何实现WebApi Ajax跨域请求
    这篇文章主要介绍了基于CORS如何实现WebApi Ajax跨域请求,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。概述ASP.NET Web...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作