HTTP之跨域

HTTP之跨域

  • 跨域(Cors)
    • 两种请求
      • 简单请求
        • 浏览器不同的处理方式
          • Access-Control-Allow-Origin
          • Access-Control-Allow-Credentials
          • withCredentials属性
        • 非简单请求
          • 服务器回应:
          • 什么时候会触发OPTIONS(预检请求)呢?

在这里插入图片描述

跨域(Cors)

Cors => 跨域资源共享


同源策略:端口、域名、协议
跨域构成的条件:

  • 端口不同
  • 协议不同
  • 域名不同

只要不同源

两种请求

简单请求

两个条件:

  1. 请求方法是:HEAD,GET,POST
  2. header中只能包含以下请求字段:
    1. Accpet
    1. Accpet-Language
    1. Conten-Language
    1. Content-Type(所指的媒体类型值仅仅限于下列三者之一)
        1. text/plain
        1. multipart/form-data
        1. application/x-www-form-urlencoded
浏览器不同的处理方式

对于简单请求来说,如果请求跨域,那么浏览器会放行让请求发出。浏览器会发出cors请求,并携带origin

GET/cors HTTP/1.1
Origin:http://www.baidu.com
Host:api.alice.com
Accept-Language:en-US
Connections:keep-alive
User-Agent:Mozilla/5.0
...

此时不管服务端返回的是什么,浏览器都会把返回拦截,并检查返回的responseheader中有没有Access-Control-Allow-Origin,这个头部信息的值通常为请求的Origin值,表示允许该来源的请求说明资源是共享的,可以拿到。

Access-Control-Allow-Origin: http://www.baidu.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
Access-Control-Allow-Origin

该字段是必须的。
它的值要么是请求时Origin字段的值,要么是一个*,表示接收任意域名的请求。
如果Origin头部信息的值为*(表示允许来自任何来源的请求)但这种情况下需要谨慎使用,应为它存在安全隐患。如果没有这个头信息,说明服务端没有开启资源共享,浏览器会认为这次请求失败终止这次请求,并且报错。

Access-Control-Allow-Credentials

该字段可选。
它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求中。
设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器,这个值也只能设为true,如果服务器不需要浏览器发送Cookie,删除该字段即可。

withCredentials属性

CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发送到服务器,一方面要服务器同意,指定Access-Control-Allow-Credentials字段

Access-Control-Allow-Credentials:true
非简单请求

只要不满足简单请求的条件,都认为是非简单请求。


先发送OPTIONS 预检请求
OPTIONS请求按照简单请求的方式处理


目的:保护客户端的安全,防止不受信任的网站利用用户的浏览器向其他网站发送恶意请求。

  • Access-Control-Request-Method:告诉服务器实际发送的HTTP请求方法。
  • Access-Control-Request-Header:告诉服务器实际请求所携带的自定义的头部信息。
OPTIONS /resources/post-here/ HTTP/1.1
Host: bar.other
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://www.baidu.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

服务器根据以上信息决定,该请求是否被允许

服务器回应:
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type
什么时候会触发OPTIONS(预检请求)呢?
  1. 跨域的时候:Access-Control-Request-Headers:X-PINGOTHER,Content-Type
  2. 发送跨域的时候:使用PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH等请求方法。

好啦~这就是今天的新知识点【跨域】,看到这里有一点点了解了吗?
加油丫,正在进步的友友们~
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/221839.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Go中的延时执行魔法:深入浅出defer用法

一、defer 介绍 1、defer 特性 关键字 defer 用于注册延迟调用这些调用直到 return 前才被执行,因此,可以用来做资源清理多个 defer 语句,按先进后出的方式执行defer 语句中的变量,在 defer 声明是就决定了 2、defer 用途 关闭…

re:invent 2023 Amazon Q 初体验

授权声明:本篇文章授权活动官方亚马逊云科技文章转发、改写权,包括不限于在 Developer Centre,知乎,自媒体平台,第三方开发者媒体等亚马逊云科技官方渠道 前言 亚马逊云科技在2023 re:Invent全球大会上宣布推出 Amazon…

C++ 函数进阶

目录 缺省参数 缺省参数的分类 全缺省参数 半缺省参数 缺省参数应用 占位参数 函数重载 函数重载注意事项 C支持函数重载的原理 缺省参数 缺省参数是声明或定义函数时为函数的参数指定一个缺省值。 在调用该函数时,如果没有指定实参则采用该形参的缺省值…

【无标题】从0到1 搭建一个vue3+Django项目

目录 一、后端项目python django二、前端项目vitevue3三、后端配置3.1 将路由指向app3.2 app下创建urls.py, 写入路由3.3 views写入test函数3.4 启动服务,访问路由 四、前端配置4.1 安装一些工具库及创建文件4.1.1 安装需要用的三方库4.1.2 创建文件 4.2…

探索 IndexedDB 的世界:大规模数据存储的解决方案

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

MySQL 数据库如何实现 XA 规范?

本文我们来讨论 MySQL 的 XA 规范有哪些应用相关的内容。 MySQL 为我们提供了分布式事务解决方案,在前面的内容中提到过 binlog 的同步,其实是 MySQL XA 规范的一个应用,那么 XA 规范是如何定义的,具体又是如何应用的呢&#xff…

『App自动化测试之Appium基础篇』| 从定义、原理、环境搭建、安装问题排查等深入了解Appium

『App自动化测试之Appium基础篇』| 从定义、原理、环境搭建、安装问题排查等深入了解Appium 1 关于Android UI自动化测试2 Appium简介3 Appium原理3.1 Android端过程3.2 iOS端过程 4 补充内容5 JDK下载6 JDK配置7 SDK下载8 SDK配置9 配置Android环境10 安装NodeJs11 解决node安…

chineseocr项目不使用web推理-docker容器化

整个流程介绍 拉取 ufoym/deepo 镜像 -- 因为包含了主流深度学习框架,镜像4G出头。拉取 chineseocr 项目代码。修改代码,不使用web,增加命令行传入图片路径的功能打包成docker镜像。 开始 拉取 ufoym/deepo 镜像 :cpu版本为例 do…

Gitlab代码集成阿里代码检查P3C

文章目录 一、获取P3C-PMD1、下载源码2、打包3、上传文件 二、创建hooks1、指定项目2、全局设置 三、使用 一、获取P3C-PMD 1、下载源码 源码地址:https://github.com/alibaba/p3c 也可以直接下载打包好的文件, p3c-pmd-2.1.1-jar.zip: https://pan…

Javaweb之前端工程打包部署的详细解析

6 打包部署 我们的前端工程开发好了,但是我们需要发布,那么如何发布呢?主要分为2步: 前端工程打包 通过nginx服务器发布前端工程 6.1 前端工程打包 接下来我们先来对前端工程进行打包 我们直接通过VS Code的NPM脚本中提供的…

Python与PHP:编写大型爬虫的适用性比较

目录 一、引言 二、Python编写爬虫的优势 1、强大的数据处理能力 2、丰富的网络库和框架 3、良好的可读性和易维护性 4、社区支持和生态系统 三、PHP编写爬虫的优势 1、简单易学 2、广泛的应用领域 3、高效的性能 4、灵活的请求处理方式 四、大型爬虫的编写实例&am…

java开发神器之ecplise的基本使用

java开发神器之ecplise的基本使用 一、ecplise的安装二、利用ecplise创建工作空间 一、ecplise的安装 免安装eclipse程序包 二、利用ecplise创建工作空间 1、准备好eclipse的程序包,右键执行程序。 2、若打开eclipse显示如下第一张图的界面提示,是因…

生产环境_从数据到层级结构JSON:使用Spark构建多层次树形数据_父子关系生成

代码补充了!兄弟萌 造的样例数据 val data Seq(("USA", "Male", "Asian", "Chinese"),("USA", "Female", "Asian", "Chinese"),("USA", "Male", "Bl…

网络之路26:STP生成树协议

正文共:2222 字 19 图,预估阅读时间:3 分钟 目录 网络之路第一章:Windows系统中的网络 0、序言 1、Windows系统中的网络1.1、桌面中的网卡1.2、命令行中的网卡1.3、路由表1.4、家用路由器 网络之路第二章:认识企业设备…

碳信用市场的未来:中碳CCNG的愿景

在全球碳减排努力日益增强的背景下,中国碳中和发展集团有限公司(简称中碳CCNG)正以其创新的碳交易平台引领行业新趋势。中碳CCNG提供的一站式综合服务不仅包括碳信用的托管、买卖和抵消,而且通过其综合性数字平台,促进…

【100天精通Python】Day75:Python机器学习-第一个机器学习小项目_鸾尾花分类项目(上)

目录 1 机器学习中的Helloworld _鸾尾花分类项目 2 导入项目所需类库和鸾尾花数据集 2.1 导入类库 2.2 scikit-learn 库介绍 (1)主要特点: (2)常见的子模块: 3 导入鸾尾花数据集 3.1 概述数据 3.…

matlab 最小二乘拟合空间直线(方法二)

目录 一、算法原理1、算法过程2、参考文献二、代码实现三、结果展示四、相关链接本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT。 一、算法原理

IT外包服务内容有哪些?

在信息技术迅猛发展的今天,越来越多的企业为了提高效率、降低成本以及更专注于核心业务,选择将信息技术工作外包给专业的IT服务公司。IT外包包含很多不同的服务,以下是对主要服务内容的简要概述。 1. 网络建设与维护 网络是现代企业信息系统…

jquery实现省市区三级联动

一、技术&#xff1a; 前端采用的是jsp页面 后端采用springmvcmybatismysql8 效果图 二、cascadeSelect.jsp页面 <% page contentType"text/html;charsetUTF-8" language"java" %> <%String path request.getContextPath();String basePath …

每日一练2023.12.5—— 一帮一【PTA】

题目链接&#xff1a; L1-030 一帮一 题目要求&#xff1a; “一帮一学习小组”是中小学中常见的学习组织方式&#xff0c;老师把学习成绩靠前的学生跟学习成绩靠后的学生排在一组。本题就请你编写程序帮助老师自动完成这个分配工作&#xff0c;即在得到全班学生的排名后&…