首页 > 其他分享 >【前后端】跨源资源共享了解下

【前后端】跨源资源共享了解下

时间:2022-12-12 11:03:51浏览次数:40  
标签:资源共享 Control 请求 Origin 跨源 前后 预检 Access CORS

​Access to fetched has been blocked by CORS policy​​在控制台的报错信息相信你遇到过。

这就是CORS造成的。

比如:

我们的网站​​www.mywebsite.com​​​想通过位于​​www.anotherdomain.com​​的服务器那里获取用户数据~

【前后端】跨源资源共享了解下_Access

​CORS​​为什么会产生呢?又意味着什么?

同源策略

同源策略的目的,是为了保护用户的信息安全,防止恶意的网站窃取数据

【前后端】跨源资源共享了解下_响应头_02

【前后端】跨源资源共享了解下_响应头_03

同源策略是指在WEB浏览器中,允许某个网页脚本访问另外一个网页的的数据,但是这两个网页必须有相同的URI、主机名和端口号​,一旦两个网站满足上述的条件,这两个网站就被认定为具有相同的源

如图:

【前后端】跨源资源共享了解下_服务端_04

客户端CORS

在​​javascript​​脚本请求中,我们只能获取同源的资源。

【前后端】跨源资源共享了解下_响应头_05

嗯...我们经常需要获取跨源的资源,获取后端的数据呢?为了保证跨源请求安全,浏览器使用了CORS机制。

​CORS​​全称Cross-Origin Resource Sharing,即跨源资源共享。虽然浏览器不默认允许我们跨源请求资源,但是,我们可以使用​​CORS​​来更改这个安全限制,来保证我们获取的跨源资源依旧是安全的。

当跨源请求发起,客户端会自动在HTTP请求头中添加​​Origin​​​,​​Origin​​的值就是表明资源从哪里来。

【前后端】跨源资源共享了解下_响应头_06

为了保证客户端能够获取跨源资源,这还需要服务端在响应头上做出特定的回应。

服务端CORS

作为一个服务端开发者,我们应该允许必要跨源的请求,在响应中设置额外的响应头​​Access-Control-*​​来完成。

虽然有几个响应头我们可以设置--​​可参考​​,但是客户端知道一个即可:​​Access-Control-Allow-Origin​​。

​Access-Control-Allow-Origin​​指定哪个源上的资源被允许。

比如服务端允许源​​https://mywebsite.com​​访问它的资源。

【前后端】跨源资源共享了解下_响应头_07

漂亮!我们可以收到服务端返回的数据了~

【前后端】跨源资源共享了解下_前端_08

在上图的例子中,客户端CORS机制,它会检查响应头上的​​Access-Control-Allow-Origin​​​值是否包含它发起请求头的​​Origin​​​值。我们请求头的​​origin​​​是​​https://www.mywebsite.com​​​,在响应头的​​Access-Control-Allow-Origin​​列表中。

【前后端】跨源资源共享了解下_Access_09

那么,如果请求头​​origin​​​上的值,不在响应头的​​Access-Control-Allow-Origin​​的列表中,就会发生下面的错误~

【前后端】跨源资源共享了解下_Access_10

错误很明显了:

The 'Access-Control-Allow-Origin' header has a value
'https://www.mywebsite.com' that is not equal
to the supplied origin.

通配符 * 表示任何的源都可以访问本服务端。所以请慎用~

​Access-Control-Allow-Origin​​是CORS中一个比较常用的响应头参数,表明哪些请求的来源可以被通过或者被禁止。

​Access-Control-Allow-Methods​​是CORS中另一个比较常用的响应头参数,表明跨源的哪些请求方法被限制在响应头此参数列表中。

【前后端】跨源资源共享了解下_后端_11

在上图的示例中,​​GET​​​, ​​POST​​​ 或者 ​​PUT​​​ 被允许通过,而 ​​PATCH​​​ 或则 ​​DELETE​​ 则会被阻塞~

说到 ​​PUT​​​, ​​PATCH​​​ 和 ​​DELETE​​ 方法,CORS对它们的处理又有些不同,它们会执行预检请求

预检请求

CORS有两种类型的请求:​​简单请求​​​和​​预检请求​​。区分两种请求取决于其请求的数据--

简单总结:​​GET​​​,​​HEAD​​​或​​POST​​​这些方法,并且他们没有自定义的​​header​​参数,那就是简单请求了;而​​PUT​​​,​​PATCH​​​或​​DELETE​​这些方法就是预检请求了。

对于​​简单请求和预检请求​​的详细解释,可以参考​​MDN这里​​

那么,预检请求意味着什么?

在真正的请求发送之前,客户端生成一个预检请求。预检请求会在请求头​​Access-Control-Request-*​​包含真正请求的信息,然后给到服务端。

【前后端】跨源资源共享了解下_响应头_12

服务端收到了预检请求后,然后返回一个空的返回体但是带上​​CORS​​响应头。浏览器收到响应,然后检查请求是否被允许了✔。

【前后端】跨源资源共享了解下_前端_13

在预检请求通过之后,浏览器就会发起真正的请求,服务端这个时候才返回我们想要的数据。

【前后端】跨源资源共享了解下_服务端_14

如果预检请求没通过,真正的请求就不会被发起。

标签:资源共享,Control,请求,Origin,跨源,前后,预检,Access,CORS
From: https://blog.51cto.com/u_11966691/5929219

相关文章

  • vue封装移动端日历选择和前后日期切换功能组件
    整体效果1.main.js文件引入element-ui(需要用install指令安装,这里不贴出来了)2.新建组件文件<template><divid="app"><divclass="choose-day-week-month-year-all">......
  • 进入python的世界_day49_Django的基本配置、ORM、前后端数据库的相联
    ​ 接口就是一个网址一、静态文件​ 不需要经常改变的文件,主要针对HTML文件所用到的资源,在django中,要提前手动创建一个文件夹,static,然后里面自己再分门别类一下#比如......
  • [转]基于 Node.js 实现前后端分离
    为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异。痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟......
  • 关于前后端交互的ajax一些发现
    后端输出到网页和js输出到网页,优先级是后端ajax要用函数包着触发,不然一进去就触发ajaxerror和succees要用function(){xxx}写$.ajax({ url:"发送请求(提交或读取......
  • Docker 启动前后端脚本
    后端docker提前运行consul,mongo,redis进入到Jar所在的文件夹(文件夹下只有一个Jar!)新建start.shCMDjar_name=$(ls-1-F*.jar)&&\java-Xms450m-Xmx450m\-XX:+......
  • 答疑 - SAP OData 框架处理 Metadata 元数据请求的实现细节,前后端组件部署在同一台物
    我的知识星球里有一个朋友提出了SAPOData服务metadata缓存方面的疑问,本文就来详细说一说:jerry,啥时候有时间给介绍一下fiori的Metadata数据系统的处理机制吧。我现在在......
  • 前后端进行交互的方式
    1、在前端页面中编写发送请求的方法,点击事件来完成。选中对应的按钮($(“选择器”)),再去添加点击的事件,$.ajax()函数发送异步请求。 2、JQUery封装了一个函数,称之为$.ajax()......
  • 前后端密码加密
    1前端安装cryptonpminstallcrypto-jsjs工具importCryptoJSfrom'crypto-js/crypto-js'/***AES加密:字符串keyiv返回base64*/exportfunctionEncry......
  • 用NetCore + ReactJS 实现一个前后端分离的网站 (6) 缓存机制
    1.前言对于实时性要求不高的资源,我们一般可以利用缓存机制来降低数据库的请求压力。轻量级的应用可以用自带的MemoryCache,如果对缓存的高并发、持久化有要求的可以用Red......
  • Java前后端请求Content-Type与接受方式
    1.GetGet方法没有请求体,所以加不加Content-Type没有意义。参数通过拼接到Url来加入url?key=value&key2=value2SpringMVC后台如何获取参数:Java后台通过Request的get......