【node.js】跨域的解决办法(CORS方法、同源策列的理解)

news2024/12/26 0:12:48

🥳博       主:初映CY的前说(前端领域)

🌞个人信条:想要变成得到,中间还有做到!

🤘本文核心:面对cors跨域、同源策略的处理

下图为本文的核心

 

 


目录

一、 跨域介绍

二、同源策略

三、跨域解决办法


一、 跨域介绍

浏览器使用 ajax时,如果请求了的接口地址和当前打开的页面地址不同源称之为跨域

二、同源策略

MDN官方文档传送门:浏览器的同源策略 - Web 安全 | MDN

是浏览器的一个重要的安全策略,它能帮助阻隔恶意文档,减少可能被攻击的媒介。

1.同源条件:

协议主机端口三者是一样的,后面跟的路径可以不相等

举几个例子:

比如我的url地址是  http://store.company.com/dir/page.html​​​​​​​

  1. http://store.company.com/dir2/other.html                 同源 只是路径不同
  2. http://store.company.com/dir/inner/another.html      同源 只是路径不同​​​​​​​
  3. https://store.company.com/secure.html​​​​​​​                   不同源 协议不同​​​​​​​
  4. http://store.company.com:81/dir/etc.html                 不同源 端口号不同(默认80)

三、跨域解决办法

在此介绍当前主流的CORS方法

CORS方法工作原理:服务器在返回响应报文的时候,在响应头中设置一个允许的header 

也就是加上以下这段代码

res.setHeader('Access-Control-Allow-Origin', '*');

这行代码的工作过程:浏览器请求发送了, 服务器也响应了, 但是浏览器发现了跨域访问, 判断是否有`响应头: Access Control Allow Origin' (后端是否允许跨域访问, 如果允许, 浏览器就把数据留下, 否则抛弃掉然后报错)


来个例子感受下

1.创建一个js文件,设置好请求的地址

// 1.导入模块
const http = require('http')
const axios = require('axios')

const app = http.createServer(async (req, res) => {
  console.log(req.url)
  if (req.url === '/abc') {
    // 允许跨域响应头
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Content-Type', 'application/json;charset=utf-8');
    res.end(JSON.stringify({ name: '初映CY的前说', age: 22 }))
  } else if (req.url === '/list') {
    // (1)向其他任意接口发送请求
    const { data } = await axios.get('http://ajax-api.itheima.net/api/news')
    // (2)允许跨域响应头
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Content-Type', 'application/json;charset=utf-8');
    // (3)响应返回数据
    res.end(JSON.stringify(data))
  } else {
    res.end('404 not found')
  }
})

app.listen(3000, () => {
  console.log('开启成功');
})

2.创建一个html用来发送请求体验服务器接受不同的ajax请求做出不同的响应

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

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

<body>
  <button class="btn1">点我发送ajax1</button>
  <button class="btn2">点我发送ajax2</button>

  <script>

    document.querySelector('.btn1').addEventListener('click', function () {
      // 给我们自己nodejs服务器发请求
      const xhr = new XMLHttpRequest()
      xhr.open('get', 'http://127.0.0.1:3000/abc')
      xhr.send()
      xhr.onload = function () {
        console.log(xhr.responseText)//打印请求体中内容
      }
    })

    document.querySelector('.btn2').addEventListener('click', function () {
      //给别人服务器发请求
      const xhr = new XMLHttpRequest()
      //注意这是同源的知识路径不一样
      xhr.open('get', 'http://127.0.0.1:3000/list')
      xhr.send()
      xhr.onload = function () {
        console.log(xhr.responseText)
      }
    })

  </script>
</body>

</html>

3.素材好了,我们先开启我们的服务器

 4.当我req.url为abc时,服务器做出了响应

  5.当我req.url为list时,服务器做出了响应

 简单来说就是设置代理服务器,在我们自己的服务器中设置响应头与相关的req.url。

为什么需要代理呢?就是因为我们不可以给别人的服务器直接修改请求头用CORS方法,但是我们可以给我们自己的服务器修改请求头然后将获取到的数据响应返回到我们浏览器中。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/136208.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

正态分布与numpy.random.normal函数

文章目录1. 正态分布2. numpy.random.normal函数3. 示例在Numpy中&#xff0c;有一个专门用于生成符合正态分布的随机数函数&#xff1a;numpy.random.normal&#xff0c;本文我们梳理一下它的使用方法&#xff0c;在梳理前&#xff0c;需要先了解一下什么是正态分布。 1. 正态…

黑马Hive+Spark离线数仓工业项目-任务流调度工具AirFlow(1)

任务流调度工具AirFlow 1. AirFlow介绍【了解】 - 功能、特点 - 架构角色、安装部署 2. **AirFlow使用【掌握】** - 核心&#xff1a;调度脚本【Python | Shell】 - 定时调度&#xff1a;Linux Crontab表达式 - 邮件告警&#xff1a;配置 3. 回顾Spark核心概念 - 存…

【10个基本网络故障排查工具-每个IT专业人员应了解】

网络故障排除工具是每个网络管理员的必需品。 在网络领域入门时&#xff0c;重要的是要积累一些可用于解决各种不同网络状况的工具。 虽然特定工具的使用确实是主观的并且由工程师自行决定&#xff0c;但本文中的工具选择是基于它们的一般性和通用性。 本文回顾了可帮助您解决大…

聊聊业务项目如何主动感知mysql是否存活

前言 先前写过一篇文章聊聊如何利用redis实现多级缓存同步,里面讲到业务部门因数据库宕机&#xff0c;有技术提出当数据库宕机&#xff0c;切换到redis&#xff0c;今天我们就来聊聊如何触发这个切换动作&#xff1f; 1、方案一&#xff1a;利用异常机制 伪代码如下&#xf…

大三寒假人生第一次面试失败

2022/12/28&#xff0c;今天是人生第一次面试。坐了2个小时的地铁去面试结果却很惨。一开始进门就笔试&#xff0c;当看到笔试题时发现很多基础&#xff0c;平时耳熟能详的词汇却怎么样也回答不出来。做了一个多小时&#xff0c;当面试官把题改了以后一句笔试没过。说真的在出门…

RocketMQ消息队列的下载、配置、启动、测试

目录 下载 环境变量的配置 新建一个变量 配置path 新建变量 启动 命名服务器 启动broker 测试是否启动成功 下载 地址&#xff1a;RocketMQ 官方网站 | RocketMQ 切换到中文模式很容易看的 下载那一列就行了 安装很容易的。 环境变量的配置 新建一个变量 就是你的bin文…

No.181# 点直播简要架构梳理走查

引言直播带货、潮流电商、短视频不断融合&#xff0c;本文走查下音视频直播的简要架构和角色。选择UDP&#xff0c;注重传输实时性&#xff0c;在线教育、音视频会议等。选择TCP&#xff0c;注重画面质量、是否卡顿等&#xff0c;娱乐直播、直播带货等。本文主要内容有&#xf…

RPA:帮助企业完成财务数字化转型

为什么要做财务的数字化转型 a. 传统企业财务的现状 “重复性强、耗时耗力、效率低下”是目前大家对传统企业财务的固有印象。很多企业的财务部门仍然采用传统的手工操作模式&#xff0c;财务流程繁琐分散&#xff0c;且财务部门缺乏获取、处理数据的工具。绝大部分的人力都投…

2022LOL微博杯模糊问题,1080p高清看微博杯the shy比赛直播

2022LOL微博杯的直播模糊&#xff0c;看着不爽 观看方法 1.打开下面在线播放m3u8文件的地址 http://www.m3u8.zone/ 如图 2.输入播放地址 微博杯的播放地址&#xff1a; &#xff08;1月三号的地址 如果失效往下看解决方法&#xff09; https://plwb01.live.weibo.com/ali…

前端数据结构与算法

前端数据结构与算法 文章宝典 链表 可以快速删除和插入节点&#xff0c;只用修改节点的引用 实例 队列 实例 栈 实例 树 并且左节点的值和后续节点的值都要小于等于该节点的值 图 根据图的节点之间的边是否有方向&#xff0c;可以分为有向图和无向图。 在有向图…

数字调制系列:如何理解IQ ?

最近在筹划写一系列关于数字IQ 调制的短文&#xff0c;以帮助初学者能够更好地理解和掌握。虽然IQ 调制技术已经非常广泛地应用于各种无线通信应用中&#xff0c;但是究其细节&#xff0c;仍有很多人存在疑惑&#xff0c;尤其对于初学者。作者从事测试工作多年&#xff0c;对IQ…

强化学习的Sarsa与Q-Learning的Cliff-Walking对比实验

强化学习的Sarsa与Q-Learning的Cliff-Walking对比实验Cliff-Walking问题的描述Sarsa和Q-Learning算法对比代码分享需要改进的地方引用和写在最后Cliff-Walking问题的描述 悬崖行走&#xff1a;从S走到G&#xff0c;其中灰色部分是悬崖不可到达&#xff0c;求可行方案 建模中&am…

(Java)【深基9.例4】求第 k 小的数

【深基9.例4】求第 k 小的数 一、题目描述 输入 nnn&#xff08;1≤n<50000001 \le n < 50000001≤n<5000000 且 nnn 为奇数&#xff09;个数字 aia_iai​&#xff08;1≤ai<1091 \le a_i < {10}^91≤ai​<109&#xff09;&#xff0c;输出这些数字的第 kk…

元旦礼第三弹!玻色量子荣登2022年中国创新力量50榜单

​2022年12月&#xff0c;国内最大的创新者社区极客公园重磅发布了全新的「中国创新力量 50 榜单&#xff08;InnoForce 50&#xff09;」——在过去一年为泛计算机科学领域及其交叉领域带来创新和突破的中国公司/机构。玻色量子凭借在光量子计算领域突出的核心竞争力&#xff…

配电网前推后带法求电力系统潮流(PythonMatlab实现)

目录 1 概述 2 数学模型 3 节点分层前推回代潮流计算及步骤 3.1 计算方法 3.2 计算步骤 4 算例及数据 5 Matlab&Python代码实现 1 概述 配电网通常是单电源全网连接、开环运行&#xff0c;即呈树状。针对配电系统分析&#xff0c;其根本就是进行潮流计算。潮流计算的…

通过反射机制访问java对象的属性 给属性赋值 读取属性的值

package com.javase.reflect;import java.lang.reflect.Field;/*** 通过反射机制&#xff0c;访问java对象的属性&#xff0c;给属性赋值&#xff0c;读取属性的值&#xff08;重点&#xff1a;五颗星*****&#xff09;* 本例中使用反射机制编写代码&#xff0c;看起来比不使用…

Hi3861鸿蒙物联网项目实战:智能温度计

华清远见FS-Hi3861开发套件&#xff0c;支持HarmonyOS 3.0系统。开发板主控Hi3861芯片内置WiFi功能&#xff0c;开发板板载资源丰富&#xff0c;包括传感器、执行器、NFC、显示屏等&#xff0c;同时还配套丰富的拓展模块。开发板配套丰富的学习资料&#xff0c;包括全套开发教程…

art-template模板引擎

1、模板引擎的基本概念 1.1、渲染UI结构时遇到的问题 var rows [] $.each(res.data, function (i, item) { // 循环拼接字符串 rows.push(<li class"list-group-item"> item.content <span class"badge cmt-date">评论时间&#xff1a; item…

C++ 使用Socket实现主机间的UDP/TCP通信

前言 完整代码放到github上了&#xff1a;cppSocketDemo 服务器端的代码做了跨平台&#xff08;POSIX和WINDOWS&#xff09;&#xff0c;基于POSIX平台&#xff08;Linux、Mac OS X、PlayStation等&#xff09;使用sys/socket.h库&#xff0c;windows平台使用winsock2.h库。 客…

STM32配置LED模块化

文章目录前言一、LED的模块化二、GPIO初始化详细解析三、LED代码封装总结前言 本篇文章将带大家深入了解GPIO的配置&#xff0c;并带大家实现LED模块化编程。 一、LED的模块化 什么叫模块化编程&#xff1f;我的理解就是每一个模块都分别写成对应的.c和.h文件&#xff0c;有…