CORS原理及解决办法

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

浏览器的同源策略阻止读取来自不同来源的资源。这种机制阻止恶意站点读取另一个站点的数据,但它也阻止合法使用。

一般情况下,我们可以通过两种方式解决浏览器的同源策略,JSONP和CORS,CORS解决方案更为通用(推荐)。

浏览器如何做资源请求的?

浏览器和服务器可以使用超文本传输​​协议 (HTTP) 通过网络交换数据。 HTTP 定义了请求者和响应者之间的通信规则,包括获取资源所需的信息。

CORS原理及解决办法

HTTP 头用于协商客户端和服务器之间的消息交换类型,并用于确定访问权限。浏览器的请求和服务器的响应消息都分为headerbody两部分:

header

有关消息的信息,例如消息类型或消息编码。标头可以包括表示为键值对的各种信息。请求头和响应头包含不同的信息。

Sample Request header

Accept: text/html
Cookie: Version=1

以上相当于说“我想接收 HTML 作为响应。这是我拥有的一个 cookie”。

Sample Response header

Content-Encoding: gzip
Cache-Control: no-store

以上相当于说“数据是用gzip编码的。请不要缓存它。”

body

消息本身。这可以是纯文本、二进制图像、JSON、HTML 等。

CORS是如何工作的?

同源策略告诉浏览器阻止跨源请求。当你想从不同的源获取公共资源时,资源提供服务器需要告诉浏览器“请求来自的这个源可以访问我的资源”。浏览器记住这一点并允许跨源资源共享。

步骤一:客户端(浏览器)请求

当浏览器发出跨域请求时,浏览器会添加一个带有当前源(方案、主机和端口)的 Origin 标头。

步骤二:服务器响应

在服务器端,当服务器看到此标头并希望允许访问时,它需要在响应中添加一个 Access-Control-Allow-Origin 标头,指定请求来源(或 * 以允许任何来源。)

步骤三:浏览器收到响应

当浏览器看到带有适当 Access-Control-Allow-Origin 标头的响应时,浏览器允许与客户端站点共享响应数据。

CORS 实战

打开浏览器控制台。(以Chrome为例,F12即可打开)

CORS原理及解决办法

输入以下命令,表现如下:

fetch('https://cors-demo.glitch.me/', {mode:'cors'})

CORS原理及解决办法

其中https://cors-demo.glitch.me/的响应头如下:

accept-ranges: bytes
cache-control: public, max-age=0
content-length: 53
content-type: application/json; charset=UTF-8
date: Sun, 26 Sep 2021 02:24:57 GMT
etag: W/"35-166a7329ce0"
last-modified: Wed, 24 Oct 2018 17:50:04 GMT
x-powered-by: Express

换另外一个网站试试:

fetch('https://cors-demo.glitch.me/allow-cors', {mode:'cors'})

Copy

CORS原理及解决办法

其中https://cors-demo.glitch.me/allow-cors的响应头如下:

accept-ranges: bytes
access-control-allow-origin: *
cache-control: public, max-age=0
content-length: 53
content-type: application/json; charset=UTF-8
date: Sun, 26 Sep 2021 02:24:37 GMT
etag: W/"35-166a7329ce0"
last-modified: Wed, 24 Oct 2018 17:50:04 GMT
x-powered-by: Express

仅仅因为添加了响应头access-control-allow-origin即解决了跨域问题。、

CORS解决带cookie跨域问题

出于隐私原因,CORS 通常用于“匿名请求”——请求未识别请求者的请求。如果您想在使用 CORS(可以识别发送者)时发送 cookie,您需要向请求和响应添加额外的标头。

请求

添加credentials: 'include'到请求参数中即可实现带cookie进行跨域请求

fetch('https://example.com', {
  mode: 'cors',
  credentials: 'include'
})

响应

Access-Control-Allow-Origin必须设置特定的值 (不能使用通配符*) 并且必须设置Access-Control-Allow-Credentials 为 true.

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true

Copy

预检请求

如果 Web 应用程序需要复杂的 HTTP 请求,浏览器会在请求链的前面添加一个预检请求。"预检请求“的使用,可以避免跨域请求对服务器的用户数据产生未预期的影响。

CORS 规范将复杂请求定义为

  • 请求采用了除 GET, POST, or HEAD之外的请求方法
  • 请求采用除 Accept, Accept-Language or Content-Language之前的请求头
  • 请求头包含 Content-Type 但值不是 application/x-www-form-urlencoded, multipart/form-data, text/plain

如果需要,浏览器会创建预检请求。这是一个如下所示的 OPTIONS 请求,并在实际请求消息之前发送。

OPTIONS /data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: DELETE

在服务器端,应用程序需要使用有关应用程序从该源接受的方法的信息来响应预检请求。

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, DELETE, HEAD, OPTIONS

服务器响应还可以包含一个 Access-Control-Max-Age 标头,以指定缓存预检结果的持续时间(以秒为单位),因此客户端无需在每次发送复杂请求时都发出预检请求。

完整请求链路如下:

CORS原理及解决办法

Java中如何解决CORS

为特定请求跨域

@RestController
@RequestMapping("/account")
public class AccountController {

    @CrossOrigin
    @RequestMapping(method = RequestMethod.GET, path = "/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @RequestMapping(method = RequestMethod.DELETE, path = "/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

controller跨域

@CrossOrigin(origins = "http://example.com", maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {

    @RequestMapping(method = RequestMethod.GET, path = "/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @RequestMapping(method = RequestMethod.DELETE, path = "/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

混合

@CrossOrigin(maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {

    @CrossOrigin("http://example.com")
    @RequestMapping(method = RequestMethod.GET, "/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @RequestMapping(method = RequestMethod.DELETE, path = "/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

全局跨域

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}

Spring Security CORS

@EnableWebSecurity
	public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
	    @Override
	    protected void configure(HttpSecurity http) throws Exception {
	        http.cors().and()...
	    }
	}

前端如何解决CORS

  • 前端代理(Angular自带)
  • Nginx反向代理

ISTIO CORS

https://istio.io/latest/docs/reference/config/networking/virtual-service/#CorsPolicy文章来源地址https://www.toymoban.com/news/detail-495107.html

apiVersion: networking.istio.io/v1beta1
kind: VirtualService
metadata:
  name: ratings-route
spec:
  hosts:
  - ratings.prod.svc.cluster.local
  http:
  - route:
    - destination:
        host: ratings.prod.svc.cluster.local
        subset: v1
    corsPolicy:
      allowOrigins:
      - exact: https://example.com
      allowMethods:
      - POST
      - GET
      allowCredentials: false
      allowHeaders:
      - X-Foo-Bar
      maxAge: "24h"

allowOrigins *

apiVersion: networking.istio.io/v1beta1
kind: VirtualService
metadata:
  name: ratings-route
spec:
  hosts:
  - ratings.prod.svc.cluster.local
  http:
  - route:
    - destination:
        host: ratings.prod.svc.cluster.local
        subset: v1
    corsPolicy:
      allowOrigins:
      - regex: '.*'
      allowMethods:
      - POST
      - GET
      allowCredentials: false
      allowHeaders:
      - X-Foo-Bar
      maxAge: "24h"

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

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

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

相关文章

  • 什么是浏览器同源策略?如何处理同源策略带来的跨域问题?

    浏览器的同源策略(Same-Origin Policy)是一种安全机制,用于限制一个网页文档或脚本如何与来自不同源的资源进行交互。同源是指两个 URL 的协议、主机和端口号都相同。 同源策略的目的是保护用户的隐私和安全。它可以防止恶意网站通过脚本访问其他网站的敏感信息或进行

    2024年02月16日
    浏览(35)
  • 浏览器同源策略导致跨域问题 No ‘Access-Control-Allow-Origin‘ header 原因及解决方式--(后端、nginx、前端)

    目录 现象 原因 浏览器同源策略 导致结果: 解决方案 跨源资源共享(CORS) 各个端解决方法: 后端: 方式1:重载WebMvcConfigurer方法 方式2:配置监听CorsFilter 方式3:相关类上加注解 @CrossOrigin 注意事项: Nginx解决: 情况1: 前端解决: 本人身份:后端 今天部署线上环境前端

    2024年01月23日
    浏览(54)
  • 本地前端代理连接服务器后端gateway api浏览器提示cors跨域,如何解决?

    🏆本文收录于「Bug调优」专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家 关注收藏订阅 !持续更新中,up!up!up!!   本地前端代理连接服务器后端gateway api浏览器提示

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

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

    2024年02月14日
    浏览(36)
  • 同浏览器下多窗口进行跨源通信、同源通信

    多页面通信运用到了“发布订阅”的设计模式,一个页面发布指令,其他页面进行订阅并进行相应的行为操作! window.postMessage() window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为 https),端口

    2024年02月08日
    浏览(36)
  • 浏览器并发请求数以及解决办法

    页面卡顿,需要好长一段时间才能加载完成,有可能是资源请求过多,再加上请求响应慢的原因。每个浏览器都有资源请求并发数的限制,本文内容讲 如何查看请求阻塞情况 到前端如何针对该限制进行优化。 按 F12 查看浏览器控制台,如下图: 从 Waterfall 看出,前六个GET请

    2024年02月08日
    浏览(68)
  • Selenium打开浏览器闪退问题(浏览器驱动是对应的前提)-解决办法

    问题解决前的代码: 问题解决后的代码: 很显然,解决办法很简单,把driver放到main外面当全局变量,然后在main里面调用就ok了

    2024年02月12日
    浏览(64)
  • 前端视频无法自动播放的问题,基于Chrome浏览器的自动播放策略原理,详细解释加了autoplay属性之后视频仍然不能自动播放的问题,并提供了二种主流的解决方法

    目录 一,什么是Chrome浏览器的自动播放策略?(原理讲解,懂了原理解决问题就会非常简单) 1.生活场景中的案例 2.Chrome自动播放策略 3.什么是媒体参与度  二: 案例演示(无法播放的情况) 1.使用autoplay属性 2.我们使用js来控制视频自动播放 3.这究竟是为什么 三.解决方案

    2024年02月09日
    浏览(55)
  • UC浏览器不让访问网站的解决办法

    我们在使用浏览器的过程中,难免遇到禁止访问网站的情况,比如uc浏览器收到该提示要怎么办呢?下面就为大家带来uc屏蔽禁止浏览网站解除方法的介绍。 uc屏蔽网站怎么解决? 1、风险网站屏蔽 · 一些擦边违规违禁站点、色情赌博网站都会被uc浏览器屏蔽,uc浏览器建议大

    2024年02月05日
    浏览(86)
  • 您的浏览器由所属组织管理 解决办法

    大概是某天大意了用了下百度不小心点到广告后边浏览器被劫持给我装垃圾软件,用火绒扫了一遍基本没问题了,但是浏览器那个看到就膈应。 regedit进入到注册表,一定给要删干净 谷歌官方由说明按着删除即可 要从 Windows 设备中移除 Chrome 浏览器管理政策,您需要清除 Ch

    2024年02月04日
    浏览(46)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包