关于跨域那些事

最新推荐文章于 2024-02-01 15:44:50 发布
最新推荐文章于 2024-02-01 15:44:50 发布
阅读量245 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_26112999/article/details/81074972
本文探讨了浏览器同源策略的重要性及其背后的原因，并通过一个简单的例子解释了如果没有同源策略，用户可能会遭受的CSRF攻击。此外，还提供了一个跨域资源共享(CORS)配置示例，展示了如何在后端进行设置以允许跨域请求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

以前从后端拿数据的时候，碰到跨域问题都是后端处理，处理起来也简单 直接加上下面的东西在config里面就好。

<httpProtocol>

<customHeaders>

<add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>

<add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>

<add name="Access-Control-Allow-Origin" value="*" />

</customHeaders>

</httpProtocol>

今天看到一个浏览器同源策略，以前都是一知半解，只是知其然，不知其所以然。 那么就花点功夫了解一下。

所谓浏览器同源，就是每个网页只能加载自己这个网页域名里的东东，但是拿别人的就不行，当然，别人也拿不走你的

为什么这么做呢？我们知道，网页里有个叫cookie的东西，每次请求头里都会带上这个东西去请求，用来记住用户是否登录啥的。

假如没有这个同源策略，你在浏览一个网站www.yinhang.com时，好基友给你发来一个www.nidongde.com，你毫不犹豫点进去，这个网站暗地里向你的网站www.yinhang.com发起了请求，然后这个不法网站就登录了你的银行账号，那么，结果自然你懂得。

这个就是那啥csrf攻击。

Nginx+SpringBoot跨域那些事儿（多域名跨域加强版——Nginx配置详解）
weinichendian的博客
04-16 966
通过今天的分享，相信你已经掌握了如何在Nginx中配置多个域名跨域访问的方法。Nginx+SpringBoot这对黄金搭档不仅让你的应用更加灵活、强大，还让你的跨域问题迎刃而解。未来，随着技术的不断发展，相信会有更多优秀的跨域解决方案涌现出来，让我们的开发工作变得更加轻松、高效！好啦，今天的分享就到这里啦！如果你还有其他问题或者想要了解更多关于Nginx和SpringBoot的知识，记得关注我哦！咱们下次再见啦！
关于跨域与 csrf 的那些事
dengdongxia的博客
09-03 2044
前言   在这段时间，部门前辈分享了不少干货。我学到了不少内容，并对其进行简单整理，以便更好地转化为自己的知识。 知识探讨部分 关于跨域 产生 协议，域名，端口三者其中存在不同都会形成跨域；故，当协议，端口，域名三者均相同时，浏览器就会认为是同源，允许加载该资源，否则为不同源。 跨域存在原因：浏览器的同源限制策略 请求：客户端（www.a.com） -》 服务端(www.baidu.com)...
通过设置响应头解决跨域问题
qq_37436172的博客
11-12 9339
网上很多文章都是告诉你直接Nginx添加这几个响应头信息就能解决跨域，当然大部分情况是能解决，但是我相信还是有很多情况，明明配置上了，也同样会报跨域问题。这大概率是因为，服务端没有正确处理预检请求也就是OPTIONS请求
响应标头Allow-Headers和Expose-Headers的区别和用法
神zhi殇的博客
02-01 4148
和，简单的说，这两者都是前端和后端之间通过header传递数据的，主要的区别就是方向。
JavaScript 解决跨域问题
u010238483的博客
03-30 413
解决Javascript跨域问题只需要在web.config里面在相应的位置添加下面这串代码就行了 <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /><!--支持全域名访问--> <add name="Access-Control-All...
webapi踩的坑
weixin_30294021的博客
05-09 166
1.webapi跨域 需要在web.config的<system.webServer></system.webServer>节点中添加 <!--跨域--> <httpProtocol> <!--跨域配置开始--> <customHeaders> <ad...
关于.net ajax的跨域访问学习
weixin_39397112的博客
03-31 330
先把代码贴一贴！以下是HTML的代码：&lt;body&gt; &lt;form action="#" method="post"&gt; &lt;input type="text" id="name"  /&gt;用户名 &lt;input type="password" id="password" /&gt;密码
跨域资源那些事.pdf
08-08
跨域资源分享（Cross-Origin Resource Sharing，简称CORS）是Web开发中解决浏览器同源策略限制的一种机制。同源策略是浏览器内置的安全措施，限制了来自不同源的“脚本”对网页内容的访问，以防止恶意代码窃取数据。...
关于C#中ajax跨域访问问题
01-20
最近因项目需要，需要跨域请求访问数据。跨域访问是指什么？ [跨域]：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。所谓同域是指，域名，协议，端口均...
关于iframe跨域POST提交的方法示例
11-29
以前在面试的时候经常遇到问关于跨域的事儿，所以自己对跨域有一定的概念性了解，知道什么是跨域以及解决跨域的方法，但是具体实际从来没有操作过，直到最近在公司项目中，遇到了一个需要使iframe跨域进行POST提交的...
ASP.NET 允许跨域请求
坚持的专栏
06-15 1万+
在项目开发中，为了方便每个客户端调用，统一调用接口，ASP.NET 需要跨域请求 第一种方式 在代码里设置HttpHeader： #region 支持跨域请求             context.Response.ClearHeaders();             context.Response.AppendHeader("Access-C
jquery ajax跨域请求webservice webconfig配置
liyifei21的专栏
12-23 1万+
js 代码 function call2() { $.support.cors = true; $.ajax({ url: "http://localhost:21179/WebService1.asmx/Test", type: "POST", dat
ajax 设置Access-Control-Allow-Origin实现跨域访问
热门推荐
傲雪星枫
06-06 49万+
ajax跨域访问是一个老问题了，解决方法很多，比较常用的是JSONP方法，JSONP方法是一种非官方方法，而且这种方法只支持GET方式，不如POST方式安全。 即使使用jquery的jsonp方法，type设为POST，也会自动变为GET。如果跨域使用POST方式，可以使用创建一个隐藏的iframe来实现，与ajax上传图片原理一样，但这样会比较麻烦。因此，通过设置Access-Control-Allow-Origin来实现跨域访问比较简单。
C#.net 不用JSONP, 设置Access-Control-Allow-Origin来实现跨域访问
chelen_jak的专栏
03-28 1万+
一、通过IIS配置 可以参考《跨域访问-需要设置HTTP响应标头》, 这种方法其实就是改了Web.config（即下面的第二种方法），只不过是提供一个操作的介面罢了。二、配置Web.config文件  （推荐）1、允许 "所有网站" 跨域访问写法：&lt;configuration&gt; &lt;system.webServer&gt; &lt;httpProtocol&gt...
asp.net2.0跨域问题
杨航的专栏
11-23 365
什么叫跨域？      简单理解就是不同服务器，不同域名之间的访问。 1 如何设置asp.net web程序的跨域？      在web.config中添加如下代码 1 &lt;system.webServer&gt;        &lt;httpProtocol&gt;         &lt;customHeaders&gt;        &lt;add name="Access-Co...
允许asp.net web程序的跨域访问
MyNameIsXiaoLai的博客
09-26 358
1、如何设置asp.net web程序的跨域？ 答：在web.config中添加如下代码 <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Methods" value="OPTIONS,POST...
WebApi调用接口跨域CORS问题【webApi学习之路】
ChinaSaoPao的博客
08-30 592
工具 vs 2019 今天练习webapi的远程调用接口时发现跨域问题 Project_Readme.html:1 Access to XMLHttpRequest at 'http://localhost:4590/api/Values/Hello' from origin 'http://localhost:5036' has been blocked by CORS policy:...
关于跨域身份认证都有哪些方法
最新发布
06-06
<think>嗯，用户想了解跨域身份认证的方法，结合之前的对话历史和系统指令，需要系统整理相关信息。用户引用了多个资料片段，重点提到了Session-Cookie的局限性和JWT的优势，特别是跨域场景下的适用性。从技术角度看，跨域认证的核心痛点是浏览器同源策略对Cookie的限制。Session-Cookie方案在跨域时需要额外配置CORS和withCredentials属性，安全性也容易受CSRF攻击影响。而JWT的无状态特性天然适合跨域，Token可以放在请求头里自由传递，但要注意Token存储安全性和过期机制。用户可能是前端开发者或全栈工程师，正在设计跨系统认证方案。ta提到的单点登录需求值得重点关注，需要解释JWT如何配合OAuth2实现多系统间的信任传递。引用[3]中提到的统一身份认证场景很典型，应该用SSO方案展开说明。回复结构上先分Session和JWT两类方法，再补充单点登录场景。重点对比两者的实现差异，比如JWT如何解决Cookie跨域问题，以及服务端如何验证Token签名。引用资料时要把参考标记自然地融入说明文字里，比如提到Express框架的使用就可以关联引用[1][4]。用户可能还有隐含需求，比如想了解具体代码实现或性能考量。可以准备回答Session共享方案（Redis集群）、CORS配置细节、JWT加解密开销等问题。</think> 跨域身份认证的常用方法及适用场景如下： --- ### 一、Session-Cookie 方案（需跨域配置） 1. **基本原理** - 服务端存储用户Session，通过Set-Cookie返回Session ID给前端 - 浏览器后续请求**自动携带Cookie**（需开启`withCredentials`） 2. **跨域问题解决** ```java // Spring Boot示例（引用[2]） @CrossOrigin(origins = "https://client-domain.com", allowCredentials = "true") ``` - **必要条件**： - 前端：`axios.defaults.withCredentials = true` - 后端：`Access-Control-Allow-Credentials: true` - 域名白名单：`Access-Control-Allow-Origin: https://client-domain.com` 3. **缺点**： - 需服务端维护Session存储 - 跨域配置复杂（引用[1][4]） - CSRF攻击风险 --- ### 二、JWT（JSON Web Token）方案（推荐跨域使用） 1. **核心机制**（引用[1][4]）： ```mermaid graph LR A[用户登录] --> B[服务端生成JWT] B --> C[返回Token给前端] C --> D[前端存储Token] D --> E[请求时携带Authorization头] ``` 2. **跨域优势**： - 无状态：服务端不存储会话 - 天然支持跨域：通过HTTP Header传递 - 典型Token格式：`Bearer eyJhbGci...` 3. **Express实现示例**（引用[1]）： ```javascript // 生成Token const token = jwt.sign({userId: 123}, 'secretKey', {expiresIn: '2h'}); // 验证中间件 const auth = (req, res, next) => { const token = req.header('Authorization')?.replace('Bearer ', ''); jwt.verify(token, 'secretKey', (err, decoded) => { if(err) return res.status(401).send(); req.user = decoded; next(); }); } ``` --- ### 三、单点登录（SSO）方案（引用[3]） 1. **跨系统认证流程**： ``` 用户访问A系统 → 重定向至认证中心 → 登录后携带Token返回A系统 → 访问B系统时认证中心自动授权 ``` 2. **关键技术**： - 中央认证服务器 - Token共享（如JWT） - 跨域Cookie + OAuth2.0协议 --- ### 四、方案对比表 | **方案** | 跨域复杂度 | 安全性 | 适用场景 | |----------------|------------|------------|------------------------| | Session-Cookie | 高⭐ | 易受CSRF | 同主域下的子系统 | | JWT | 低✅ | 需防XSS | 跨域API/微服务架构 | | SSO | 中⚠️ | 最高🔒 | 企业级多系统统一认证 | --- **总结建议**： 1. 纯前端跨域调用API → **优先JWT方案**（引用[4]） 2. 企业内部系统整合 → **SSO + JWT组合** 3. 传统Web应用（同域） → Session方案更简单 > 附：前端存储Token的安全方式 > ```javascript > // 避免LocalStorage（防XSS），使用HttpOnly Cookie > document.cookie = `token=${token}; Secure; SameSite=None; HttpOnly`; > ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值