Chrome 跨域问题CORS 分析

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

先叠个甲,有错误,望沟通指正!

1.什么是跨域报错

has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

类似上面的报错 ,就是出现了跨域限制访问问题

2.为什么postman可以,浏览器访问就不行?根本原因是什么?

同源策略(Same-Origin Policy),这个是浏览器的一个策略.也就是在A的域 去请求B域的资源,是不被浏览器允许的
这一种存在于浏览器上的安全策略,所以你用edge还是chrome,都会出现这个问题.而使用postman则没有.
抛出这个报错的根源在于浏览器

2.1浏览器是依据什么来报错跨域的?

并不是只通过IP来判断是否跨域报错的.
这里还涉及到一个参数就是Access-Control-Allow-Origin.如果请求B域的时候,返回的header带有这个参数.那么也是被浏览器允许的(可以通过同源策略的安全限制)

B域的服务,返回头中是否带有Access-Control-Allow-Origin,取决于B域的后台服务的代码中,是否开启了相关功能.
具体JAVA GOLANG PYTHON C#,如何开启Access-Control-Allow-Origin ,可以全网搜一下 ,不赘述了

也就是B域的服务端,开启了Access-Control-Allow-Origin,那么所有浏览器都可以跨域访问呢这个资源

3.常规解决方案的分析

方案1.通过代理解决

也就是最常见到的,在使用vue-admin-templete等前端分离项目开发时,咱们在vue.config.js里面配置的proxy
类似这样

devServer: {
    port: port,   //服务器 是A域
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    before: require('./mock/mock-server.js'),
    proxy: {
      '/dev-api/vat':{
        target:"http://B域:8080",
        changeOrigin: true,
      }
    }
  },

结论: 核心原理也就是转发. ,对于浏览器来说,访问/dev-api/vat的时候,实际上确实是访问服务器的/dev-api/vat资源.
但是服务器在后台启动了一个代理,将/dev-api/vat资源转发给了B域.
因为是代理服务发起给B域的,所以没有同源策略的限制.代理服务自然能够成功收到B域的返回.
接下来代理服务将结果返回给浏览器(这里对于浏览器来说,代理服务和A域 是同源的 所以没有报错)

方案2.被请求的B域的服务端开启Access-Control-Allow-Origin返回头的支持

具体JAVA GOLANG PYTHON C#,如何开启Access-Control-Allow-Origin ,可以全网搜一下 ,不赘述了
也就是B域的服务端,开启了Access-Control-Allow-Origin,那么多有浏览器都可以跨域访问呢这个资源

方案3.通过设置浏览器关闭同源策略来实现访问互通

以chrome为例 ,在快捷方式–属性–目标这里,追加参数 --disable-web-security --user-data-dir=用户数据目录 即可

例如
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\temp

此时 打开chrome将不再受跨域的束缚,但是会提示你安全性降低文章来源地址https://www.toymoban.com/news/detail-841282.html

4.对比3种方案

方案1-代理 方案2-服务端代码放开 方案3-浏览器关闭同源策略
安全性 相对 高 相对 中 相对 低
方便性 相对 中 相对 中 相对 高
使用场景 开发调试
多个服务继承部署
开发调试
多个服务继承部署
生产多环境调用
无所不能
调用区别 前端所在的服务器去调用B域 可以在浏览器访问端直接调用B域 随便搞

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

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

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

相关文章

  • Node.js、Chrome V8 引擎、非阻塞式I/O介绍

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! Node.js 是一个基于 Chrome V8 引擎的开源服务器端 JavaScript 运行环境,它允许开发者使用 JavaScript 编写服务器端应用程序。以下是关于 Node.js 的详细介绍: 特点

    2024年02月05日
    浏览(41)
  • 彻底理解前端安全面试题(3)—— CORS跨域资源共享,解决跨域问题,建议收藏(含源码)

    前端关于网络安全看似高深莫测,其实来来回回就那么点东西,我总结一下就是 3 + 1  = 4,3个用字母描述的【分别是 XSS、CSRF、CORS】 + 一个中间人攻击。当然 CORS 同源策略是为了防止攻击的安全策略,其他的都是网络攻击。除了这 4 个前端相关的面试题,其他的都是一些不常

    2024年02月01日
    浏览(48)
  • 前端调用DRI后端API出现跨域资源共享(CORS)问题解决办法

    目录 1. 引言 2. 跨源资源共享和实现方法 3. 在Django项目中配置django-cors-headers库 Reference 在进行后端API开发时,有时会遇到“跨域资源共享 (CORS) 请求...被阻止“的错误,如图1所示。本文讲解如何在使用DRF(Django REST Framework)的后端API开发项目中解决这个问题。 A cross-origin re

    2024年04月25日
    浏览(53)
  • Chrome浏览器的跨域设置

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

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

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

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

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

    2024年02月13日
    浏览(91)
  • 前端跨域解决方案——CORS

    CORS(跨来源资源共享)是一种用于解决跨域问题的方案。 CORS(跨来源资源共享)是一种安全机制,用于在浏览器和服务器之间传递数据时,限制来自不同域名的请求。在前端开发中,当通过 XMLHttpRequest(XHR)或 Fetch API 发送跨域请求时,如果服务器没有正确配置 CORS,浏览器

    2023年04月27日
    浏览(55)
  • 前端跨域解决方案之CORS详解

    CORS 是一个 W3C 标准,全称是“跨源资源共享”( Cross-origin resource sharing ),或者通俗地 称为“ 跨域资源共享 ”。它允许浏览器向跨源的服务器,发出 XMLHttpRequest 请求,从而克服AJAX 只能同源使用的限制。 为了保证用户信息的安全,所有的浏览器都遵循 同源策略 。 所谓

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

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

    2024年02月02日
    浏览(63)
  • 后端通过CorsRegistry对象配置了全局跨域,但是前端仍然报CORS跨域错误

    问题背景 在实现登录功能时,我先是通过CorsRegistry配置了全局跨域,然后配置了一个登录拦截器后前端就报错 CORS 跨域错误 问题原因 前置知识 首先我们来了解一下什么是跨域错误, 跨域错误 (Cross-Origin Error)是在Web开发中常见的错误之一,它发生在浏览器执行跨源请求(

    2024年02月07日
    浏览(54)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包