浏览器跨域

这篇具有很好参考价值的文章主要介绍了浏览器跨域。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

生活中的事跟跨域有什么关系,那必须有。
跨域的产生是浏览器的安全机制引起的,只有在使用Ajax时才会发生。简单来说就是你可以通过ajax发送请求,但要看远程服务器脸色,他没授权,浏览器这个老六就给拦截了,不能用这个结果,像极了游戏机让买不让玩。

什么是跨域

跨域(Cross-Origin)指的是在 Web 开发中,一个网页的运行环境(域)与所请求资源的域不一致,即请求的目标资源与当前网页的域名(协议、域名或端口)不同。

Web 浏览器遵循同源策略(Same-Origin Policy),这是一种安全策略,旨在防止潜在的恶意网站窃取用户数据或进行其他安全攻击。同源策略要求网页的运行环境和所请求的资源必须拥有相同的协议、域名和端口,否则浏览器会阻止跨域请求的执行。

举例来说,每个网站都有一个域名或者IP地址(实际上域名就是对IP地址的别名,方便人们记忆)。当我们访问一个网站时,浏览器会将某个页面下载到本地并解析,以展示图形页面。为了支持更多的业务需求,在这个页面中可能会发起一些额外的请求。为了避免页面卡顿,我们使用了Ajax技术偷偷地通过后门请求数据。偷偷走后门是可行的,但是必须遵循规则,不可以随意发起请求。

假设当前页面是www.qfedu.com,在这个页面中发送了一个Ajax请求。浏览器允许请求发送出去,但是请求的地址不是本身的地址,而是www.1000phone.com/api/xxxx这样的地址。此时,浏览器会检查响应,并查看服务端是否允许任何来源发起请求。如果服务端允许,浏览器将放行请求。否则,浏览器会报错,这种错误就是跨域问题。

来吧,看图

浏览器跨域,okhttp

绿色都是可以通行的,红色是跨域概念的关键点

如何处理跨域

常用的解决跨域方案有3种,分别是jsonp、cors、proxy

    ● JSONP(JSON with Padding):核心思想是浏览器只限制ajax,不限制图片、多媒体、css、js等资源访问其他网站,恰好利用这个特性,使用一些技巧来解决跨域。

JSONP 是一种利用<script>标签进行跨域请求的技术。通过在页面中动态创建<script>标签,请求远程服务器资源,并在服务器响应中返回一个包裹在函数调用中的 JSON 数据,从而绕过同源策略的限制。JSONP 适用于在受控的环境中,服务器端需要配合返回 JSONP 格式的数据。

有局限性,需要回调函数 +别人服务端配合

    ● CORS(跨域资源共享):核心思想就是让服务器不对任何访问者做限制,在响应头中添加一些语句,浏览器就放行了,就像游戏机卖家跟家长说多大都可以玩,家长也就不会没收了。

    CORS 是一种标准的跨域解决方案,由服务器端进行配置。服务器通过设置响应头来指示允许特定域的请求访问资源,浏览器在接收到响应头后判断是否允许跨域请求。CORS 支持简单请求和预检请求,是一种较为安全和灵活的跨域解决方案。

node.js类型的服务器代码设置如下:

// // 允许哪些域名请求我//设置所有页面都可以访问这个服务resp.setHeader('Access-Control-Allow-Origin', '*')//只允许设定的几个网站访问resp.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:7777')//允许设定多个网站访问resp.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:7777,http://127.0.0.1:5500')// // 允许哪些请求方式// resp.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")// // 允许携带哪些额外的请求头信息// resp.setHeader("Access-Control-Allow-Headers", "X-Requested-With,X_Requested_With,Content-Type")

有局限性,需要服务端配合,别人服务端安全性降低

● 代理服务器(Proxy):核心思想是指挥家长玩游戏机。。。

代理服务器是一种通过后端服务器转发请求的方法。前端应用将跨域请求发送给同源服务器,然后同源服务器再向目标服务器发送请求,并将响应返回给前端。这样前端应用就绕过了跨域问题,因为请求是同源的。代理服务器是一种有效的跨域解决方案,特别适用于无法修改目标服务器响应头的情况。

这个是比较好的解决方案

 文章来源地址https://www.toymoban.com/news/detail-684074.html

到了这里,关于浏览器跨域的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 浏览器的同源策略 - 跨域问题

    跨域问题的实质是浏览器的同源策略造成的。浏览器同源策略是浏览器为 JavaScript 施加的限制。简单点说就是非同源会出现如下等限制: 无法访问其他源下的网页的 Cookies,Storage等; 无法访问其他源下的DOM对象和 JS 对象; 无法使用 Ajax 向其他源发送请求(除非其他源允许)

    2024年02月15日
    浏览(36)
  • Chrome浏览器的跨域设置

    做前后端分离的开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,而且chrome浏览器支持可跨域的设置,但是新版本的chrome浏览器提高了跨域设置的门槛,原来的方法不再适用了。其实网上也有很多大神总结的chrome跨域设置教程,都是差不多。 下载好谷歌浏

    2024年02月02日
    浏览(83)
  • 浏览器多管闲事之跨域

    年少时的梦想就是买一台小霸王游戏机 当时的宣传语就是小霸王其乐无穷~。 大些了,攒够了零花钱,在家长的带领下终于买到了 那一刻我感觉就是最幸福的人 风都是甜的! 哪成想... 刚到家就被家长扣下了 “”禁止未成年人玩游戏机 (问过卖家了,卖家给的结论)..., 合着

    2024年02月13日
    浏览(38)
  • chrome浏览器跨域设置(版本号108之后的跨域设置)

    1、首先在chrome浏览器安装目录下复制chrome.exe,生成一个新的命名为chrome-cross.exe 注意:为什么要在目录下复制一个新的?是因为如果名字相同,可能会导致设置好的跨域浏览器打开后跟原来的chrome.exe是同一个浏览器,设置的跨域浏览器就不是生效了。 2、点击 chrome-cross.exe

    2024年02月15日
    浏览(54)
  • 谷歌关闭跨域限制.(生成一个开发浏览器),Chrome关闭跨域

    就可以了。开发的时候很爽

    2024年02月13日
    浏览(78)
  • 浏览器对跨域请求携带Cookie的方法

    企业开发时会分开发环境、测试环境以及生产环境,但是有的企业开发只有真正发布到线上的生产环境的流程才会严格配置,有的项目开发环境或者测试环境中,前后端配置没有特别严格要求,就导致前端请求发送时返回错误信息。比如项目发送了一个跨域请求,该请求需要

    2024年02月16日
    浏览(50)
  • 浏览器不同源的页面之间如何跨域通信

    现在有2个项目,页面路径不同源。 ToC 的收银台项目 类似在PC端京东淘宝,支付最后一步的收银台页面,可以选择不同支付工具付款。 ToB 的后台管理项目 可以对收银台项目整体做一些配置:样式,支付工具相关的等等,配置项很多。 需求 想要在后台管理项目中增删配置项

    2024年02月14日
    浏览(36)
  • 前端笔记 ---- Chrome 浏览器不能跨域访问解决方案

    1. 需求场景 Chrome 浏览器开发 H5 进行接口联调时,浏览器不允许跨域访问; 想通过浏览器设置,不使用代理等,浏览器可以进行跨域访问。 2. 报错图片 3. 解决方案 3.1 获取Chrome 浏览器安装位置 3.2 设置允许跨域和不验证证书 3.3 cmd 执行设置命令 3.4 组成完整命令 3.5 cmd 运行命

    2024年02月15日
    浏览(45)
  • Mac版chrome谷歌浏览器解决跨域,进行开发调试

    跨域问题一般在浏览器中这样提示 1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。 最初,它的含义是指,A 网页设置的 Cookie,B 网页不能打开,除非这两个网页“同源”。所谓“同源”指的是“三个相同”: 协议相同 域名相同 端口相同 同源

    2024年02月02日
    浏览(57)
  • 最新版本chrome浏览器出现的跨域问题及解决方案

    最近将chrome浏览器更新到了最新版本 ,在个别网站上出现了跨域访问问题。 目录 解决办法: (1)增加参数配置代码 (2)重新打开浏览器 在桌面快捷方式中右键》属性》快捷方式中的目标后面加入以下参数配置代码 注意:其中chrome.exe与--disable之间有一个空格 然后重新打

    2024年02月06日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包