跨域问题实战及分析

自己写了一个nodejs服务器,在html页面中调用接口,遇到了跨域问题,该怎么解决呢?

server.js
创建服务器

const express=require('express');
const app=express();//创建express服务器
app.listen(80,()=>{//启动服务器console.log('express server run  at http://127.0.0.1')
})
//监听get请求
//参数1: 客户端请求的url地址,
//参数2:请求对应的处理函数
//req  请求对象
//相应对象
app.get('/user', function(req, res) {res.send({name:'zs',age:20,gender:'男'})//res.send(),可以把处理好的内容返回给客户端
}) 

server.js 同级下新建一个 test.html页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
<script src="./jQuery.min.js"></script>
<script>$.ajax({method:'get',url:'http://127.0.0.1/user',}).done(function(res){console.log(res);}).fail(function(rej){})
</script>
</html>

加载test.html页面console 有报错:
Access to XMLHttpRequest at ‘http://127.0.0.1/user’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
CORS是指跨源资源共享 报错是跨域的意思

跨域

跨域的概念很简单 前端请求的url的域名、端口、协议与当前页面的url的域名、端口、协议不同就是跨域,如果相同,就是处于相同域上

,即当一个请求URL的协议、域名、端口三者之间任意一个与当前页面URL不同则视为跨域,

产生的原因

跨域问题产生的原因主要是由浏览器的“同源策略”限制导致的,是浏览器对JavaScript 施加的安全限制。

同源策略

同源策略是一个重要的安全策略,它用于限制一个origin的文档或它加载的脚本如何能与另一个源的资源进行交互。能够减少恶意文档,减少可能被攻击媒介。 如果两个URL的协议、域名、端口号都相同,就称这两个URL同源。

可理解为请求的url的协议,域名,端口号和当前页面的url协议,域名,端口号相同就是一种同源

浏览器默认两个不同的源之间是可以互相访问资源和操作DOM的。两个不同的源之间若是想要访问资源或者操作DOM,那么会有一套基础的安全策略的制约,我们把这称为同源策略。它的存在可以保护用户隐私信息,防止身份伪造。

同源策略目的举例

同源策略的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。假设你成功登录了某个银行网站,自己的账户余额在你登录后都可以随意操作,大家都知道很多网站系统在你登录成功后都会给你的浏览器发送Cookie,Cookie中一般会记录你的部分信息甚至是登录状态,而当你在未退出银行网站的情况下,接着又去浏览了其他网站,如果其他网站可以读取银行网站的 Cookie,会发生什么?很显然,你的Cookie中信息会全部泄露,甚至其他网站还会使用你的Cookie来登录你的账号冒充你来操作你的账户,由于浏览器同时还规定,提交表单不受同源策略的限制,从而你的钱就会不翼而飞。这就是所谓的CSRF攻击,中文名称为:跨站请求伪造攻击,即攻击者盗用了你的身份,以你的名义发送恶意请求。CSRF能够做的事情包括:以你名义发送邮件,发消息,盗取你的账号,甚至于购买商品,虚拟货币转账……造成的问题包括:个人隐私泄露以及财产安全。

同源策略的好处

浏览器的同源策略目的是为了保护用户的信息安全,为了防止恶意网站(大概查不到ip不能进行定位)窃取用户在浏览器上的数据,如果不是同源的站点,将不能进行如下操作 :

  • Cookie、LocalStorage 和 IndexDB 无法读写
  • DOM 和 Js对象无法获得
  • AJAX请求不能发送

最后,上述访问nodejs 服务器跨域问题该怎么解决?
通过Access-Control-Allow-Origin响应头,就告诉了浏览器。如果请求我的资源的页面是我这个响应头里记录了的"源",则不要拦截此响应,允许数据通行。

响应头中添加

‘Access-Control-Allow-Origin’: ‘浏览器中的url’,
‘Cache-Control’: ‘no-cache’,
‘Access-Control-Allow-Origin’: ‘*’

const express=require('express');
const app=express();//创建express服务器
app.listen(80,()=>{//启动服务器console.log('express server run  at http://127.0.0.1')
})
//监听get请求
//参数1: 客户端请求的url地址,
//参数2:请求对应的处理函数
//req  请求对象
//相应对象
app.get('/user', function(req, res) {res.set({  'Access-Control-Allow-Origin': 'file:///D:/StudyAndhi/nodejs/Express/test.html','Cache-Control': 'no-cache',  'Access-Control-Allow-Origin': '*'  }); res.send({name:'zs',age:20,gender:'男'})//res.send(),可以把处理好的内容返回给客户端
}) 

参考:https://blog.csdn.net/csdssdn/article/details/125344813
https://blog.csdn.net/qq_38571892/article/details/123418918

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

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

相关文章

别一言不合就重装系统!Windows 无法正常启动先试试这些办法

你是否遇到过在升级或安装 Windows 10 操作系统&#xff0c;Windows 无法正常启动进入桌面&#xff0c;甚至陷入无限循环。造成的原因有很多&#xff0c;比如 Windows 更新&#xff0c;安装了新的软件或者驱动程序&#xff0c;系统文件损坏等等。那遇见 Windows 启动不了怎么办…

【Midjourney】Midjourney根据prompt提示词生成人物图片

目录 &#x1f347;&#x1f347;Midjourney是什么&#xff1f; &#x1f349;&#x1f349;Midjourney怎么用&#xff1f; &#x1f514;&#x1f514;Midjourney提示词格式 Midjourney生成任务示例 例1——航空客舱与乘客 prompt prompt翻译 生成效果 大图展示 细节大…

Unity 设置 Text 颜色 #FF7B2A

在Unity中&#xff0c;你可以使用 Color32 或 ColorUtility.TryParseHtmlString 来设置带有HTML颜色代码的文本颜色。以下是两种方法的示例&#xff1a; 使用 Color32&#xff1a; using UnityEngine; using UnityEngine.UI;public class SetTextColor : MonoBehaviour {publi…

铂炭催化剂,2026年市场预计将以6.5%左右的复合年增长率增长

铂碳催化剂广泛用于各种工业应用&#xff0c;包括化学、制药和汽车领域。在对清洁能源的需求不断增加和环境问题意识不断提高的推动下&#xff0c;铂碳催化剂市场正在稳步增长。本次分析&#xff0c;我们将从全球市场和中国市场分别考察铂碳催化剂市场的发展趋势。 全球市场分析…

Node.js笔记分享

Node.js 一、初识Node.js 与浏览器为Js提供前端运行环境相对应&#xff0c;Node.js是基于V8引擎的Js运行环境&#xff0c;为Js做后端开发提供了可能。 Node.js的作用 基于Express框架(http://www.expressjs.com.cn/)&#xff0c;可以快速构建Web 应用 基于Electron框架(ht…

【并发编程篇】线程安全问题_—_ConcurrentHashMap

文章目录 &#x1f354;情景引入&#x1f339;报错了&#xff0c;解决方案 &#x1f354;情景引入 我们运行下面的代码 package org.example.unsafe;import java.util.HashMap; import java.util.Map; import java.util.UUID;public class MapTest {public static void main(…

Kerberos安装教程与命令详解(超详细)

文章目录 前言一、安装准备1. 搭建集群2. 软件包介绍 二、使用shell脚本一键安装1. 复制脚本2. 增加执行权限3. 执行脚本 三、kdb5_util命令1. 简介2. 可用选项和命令的解释3. 常见命令及其说明4. 示例用法 四、kadmin命令1. 简介2. 可用选项和命令的解释3. 常见命令及其说明4.…

SQL最消耗性能查询错误用法示例

查询性能的消耗主要取决于查询的复杂度、表的大小以及使用的索引等因素。以下是一些查询中常见的错误用法示例&#xff0c;它们可能导致性能问题&#xff1a; 全表扫描&#xff1a; 错误用法示例&#xff1a; SELECT * FROM your_table;这种查询会检索表中的所有行&#xff0c;…

芋道视频199 - 工作流 - 关系图 - ruoyi-vue-pro

一 新建表单 数据库&#xff1a;bpm_form。实体类&#xff1a;BpmFormDO.java&#xff1a; 二 流程模型、流程部署、流程定义 1 第1步&#xff1a;创建流程模型 页面操作&#xff1a;实体类&#xff1a;Model.java。数据库&#xff1a;ACT_RE_MODEL 流程模板信息表&#xf…

Python基础进阶:9个易错知识点

你好&#xff0c;我是kelly。 kelly根据自己平时工作&#xff0c;总结9个易错知识点&#xff0c;希望对大家有用。 知识点1&#xff1a;is 和 is比较是两个变量地址是否相同&#xff0c;比较是两个变量的值&#xff08;内容&#xff09;是否相同。 示例&#xff1a; In [92…

2分钟明白什么是SCADA?

SCADA——数据采集和监控系统的英文缩写&#xff0c;国内流行的叫法是&#xff0c;监控组态软件&#xff0c;是生产控制的核心&#xff0c;是位于控制设备之上&#xff0c;侧重于管理的纯软件&#xff0c;在ERP/MES/PCS架构中起承上启下的作用。SCADA负责控制或监控整个工厂&am…

HACCP认证需要什么条件

HACCP&#xff08;危害分析与关键控制点&#xff09;认证是食品安全管理体系的一种&#xff0c;它旨在通过预防措施来保障食品的安全。企业若要获得HACCP认证&#xff0c;通常需要满足以下条件&#xff1a; 1. 合规性要求&#xff1a;企业需要提供营业执照、组织机构代码证、QS…

uniapp路由

1、路由登记 uni-app页面路由为框架统一管理&#xff0c;开发者需要在pages.json里配置每个路由页面的路径及页面样式。 类似小程序在 app.json 中配置页面路由一样。 所以 uni-app 的路由用法与 Vue Router 不同&#xff0c;如仍希望采用 Vue Router 方式管理路由&#xff0c;…

C++虚函数和纯函数

一、虚函数和纯函数定义 在C++中,虚函数和纯虚函数是面向对象编程中的重要概念。它们用于实现多态性,即在运行时选择调用哪个函数。 1. 虚函数(Virtual Function): 虚函数是在基类中使用 virtual 关键字声明的函数,它允许在派生类中进行重写。当通过基类指针或引用调用…

九州金榜|教育孩子小技巧--给孩子讲故事

百年大计&#xff0c;教育为本。对于孩童来讲&#xff0c;故事无疑是最好的教育方法&#xff0c;通过一个个引人入胜的小故事将其中蕴含的道理、经验、哲理、观念传递给孩子。 可以这么说&#xff0c;故事对于儿童获取词汇储备、洞察能力、处事方法、情商和智力的提升都有着极为…

Unicode字符以及UTF-8

前提基础知识 计算机内部&#xff0c;所有信息最终都是一个二进制值。每一个二进制位&#xff08;bit&#xff09;有0和1两种状态&#xff0c;因此八个二进制位就可以组合出256种状态&#xff0c;这被称为一个字节&#xff08;byte&#xff09;。也就是说&#xff0c;一个字节一…

Go 语言如何读取 excel 测试数据,简单易学

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

算法基础day2

前缀和 #include <iostream> using namespace std; const int N100010; int n,m; int a[N],s[N]; int main() {scanf("%d%d",&n,&m);for(int i1;i<n;i) scanf("%d",&a[i]);for(int i1;i<n;i) s[i]s[i-1]a[i];while(m--){int l,r;s…

Gooxi亮相2023中国数据与存储峰会展示最新存储解决方案

今日&#xff0c;以“数智创新&#xff0c;AI未来”为主题的2023 中国数据与存储峰会在北京顺利举行&#xff0c;Gooxi受邀参与并展示了最新存储服务器产品&#xff0c;搭配最新处理器平台&#xff0c;能够广泛应用在人工智能、数据分析、云端计算、数据存储和高性能计算等领域…

兔子目标检测数据集VOC格式3900张

兔子是一类可爱的哺乳动物&#xff0c;拥有圆润的脸庞和长长的耳朵&#xff0c;身体轻盈柔软。它们通常是以温和和友善的形象出现在人们的视野中&#xff0c;因此常常成为童话故事和卡通形象中的角色。 兔子是草食性动物&#xff0c;主要以各种草本植物为食&#xff0c;包括草…