http -- 跨域问题详解（浏览器）

参考链接

参考链接

1.  跨域报错示例

Access to XMLHttpRequest at 'http://127.0.0.1:3000/' from origin 'http://localhost:3000' 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.

前端的这个报错相信很多人都有遇到过，也知道这是跨域请求的问题。那到底什么叫跨域呢？

跨域问题简单描述：

       简单一点说，你网页是 xxx.com/xxx.html，这个网页中的元素不允许访问除这个域名以外的其他域名下的资源(也许不严谨，化繁为简能快速理解其本质)。

       再具体一点就是这个页面下的 Ajax 请求，不能去调类似 http://abc.com/xxxx 这样的接口，必须是 xxx.com 下的接口。

2. 了解 什么是域

域 ：

        域既是 Windows 网络操作系统的逻辑组织单元，也是 Internet 的逻辑组织单元，它是安全边界。 只有域的所有者才能访问管理域内部的资源，若其他的域要访问或者管理，则需要该域赋予其他域相关权限。

        从小角度来讲，在php中的变量作用域，就可以体现出安全边界的概念。在以下例子中，调用test函数并不会输出任何内容。

<?php
$a = 123;
function test(){echo $a;
}
test();

        因为函数内调用的是局部作用域的变量，而在局部作用域内并没有声明 $a 变量。除非我们使用 global $a; 从全局作用域引用该变量。

        在 PHP 脚本中的变量作用域不算复杂，而将一个网站看做一个域，当它要引用其他域的资源时，就需要目标域对原始域进行授权信任。

        这种从其他域获取资源的操作就叫做 跨域。

简单理解：

        简单一点，就是域名，http://www.abc.com 下的网页只能调 http://www.abc.com/开头的接口否则就是跨域了，跨域就会报错，上面 2.1 小节那个错误提示。

3. 了解 浏览器的同源策略

同源策略是 Web 的一种安全约定，浏览器的同源策略只是对其的一种实现。

浏览器同源策略将认为任何站点装载的内容都是不安全的。所以会对跨域的操作或者请求进行限制，从而让用户安全的上网。

同源 指的是 域名、协议、端口 相同。 若有其中一个不同，浏览器将会认为非同源，也就是跨域。

浏览器的同源策略主要有两种

  • DOM 同源策略 ： 禁止对不同源页面的 Dom 元素进行操作，主要是在 iframe 标签加载跨域页面出现。
  • XMLHttpRequest 同源策略 ： 禁止使用 XHR 对象对不同源地址发起请求。

存储在浏览器中的数据，如 localStroage、Cooke 和 IndexedDB 不能通过脚本跨域访问

3.1 DOM 同源策略

        如果没有 DOM 同源策略，也就是说不同域的 iframe 之间可以相互访问操作。

        那么将会出现这种攻击操作：我们 iframe 包含某个网站的登录页，并且监听目标网站的登录按钮，当用户触发按钮的时候，我们拿到目标网站 input 的dom元素，并且取值，保存到自己的服务器上。

        但是因为有 Dom 同源策略的存在，禁止操作不同源页面的 dom 元素，甚至我们还可以将自己的网站设置 禁止在非同源网站上 iframe ，我们来看看下面的例子

<html><head><title>Siam - Dom同源策略</title></head><body><iframe src="http://www.alipay.com"></body>
</html>

运行以上代码，我们会看到支付宝的网站是禁止在了非同源网站上 ifarme。

我们可以看到报错 Refused to display ‘https://www.alipay.com/‘ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’

X-Frame-Options 是一个HTTP标头（header），用来告诉浏览器这个网页是否可以放在iFrame内。

用法：

X-Frame-Options: DENY     // 不允许iframe
X-Frame-Options: SAMEORIGIN   // 只允许同源的网站iframe
X-Frame-Options: ALLOW-FROM http://yancoo.cn/  // 只允许指定网站iframe

3.2 XMLHttpRequest 同源策略

        如果没有 XHR 同源策略，以及不允许跨域获取 cookies 等的限制，那么攻击者将可以发起 CSRF (跨站请求伪造) 攻击

场景可以如下：

  1. 你登录了某个银行网站，www.siambank.com，银行网站返回你的登录状态并且保存在cookies中。
  2. 你没有安全退出清空cookies，又刚好不小心浏览到了恶意网站 www.ggg.com
  3. 一进入 www.ggg.com ，它将会向 银行网站 发起XHR请求。（发送请求将会带上目标网站设置的cookies）
  4. 银行拿到cookies，验证通过，返回数据。

4. 跨域的解决方法

        前面已经说了，如果想要跨域请求访问或者管理资源，需要目标域赋予权限，到目前为止我们只说了浏览器同源策略的限制，下面我们就再说说赋予权限进行跨域访问相关的知识。

4.1 CORS 跨域资源共享

  CORS 是一个 W3C 标准,该标准定义了在访问跨域资源时，服务端和客户端需要如何沟通，如何授权信任。

CORS的原理是：

        使用 http自定义头部 ，请求头附带客户端信息，服务端验证，并且返回响应头告诉客户端是否允许访问。

        所以该标准需要客户端和服务端同时配合支持，当前所有的浏览器都支持该标准。

        CORS 对于用户来说是无感知的，由浏览器自动完成 。

        因为当前所有浏览器都支持该标准，并且由浏览器自动完成检测，所以当我们需要使用CORS的时候，只需要由服务端改动，前端不需要改动。

        CORS 将 http 请求分为 简单请求 和 非简单请求。

        浏览器对于两种类型的请求的处理步骤有一些不同.

      

4.1.1 简单请求 

从名字来理解，就是发送请求的类型或者数据不复杂。

必须同时满足以下两个条件的请求，才是简单请求:

1.  请求方法只能是在以下三种之中。

  • GET
  • POST
  • HEAD

2. HTTP 头部信息不自定义，也就是只能设置默认字段的信息

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type 只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain
  • 等等其他默认字段

简单请求处理步骤：

  1. 浏览器在Http头部带上原始域的标识 Origin
  2. 服务端根据该标识来判断是否需要信任授权，如果信任就在响应头部返回相同的标识。
  3. 浏览器判断响应头是否匹配，做相应结果处理 默认情况下 请求和响应都不带cookies

        如果需要附带cookies信息 ajax的 withCredentials 设置为 true 服务端 响应头需要增加 Access-Control-Allow-Credentials: true

4.1.2 非简单请求

请求方法是简单请求以外，或 http header 包含自定义内容，如：

  • 用到了 PUT、DELETE 等请求方法
  • Content-Type的值是上述三种以外的，如 application\json
  • 用到了自定义 header

非简单请求处理步骤：

  1. 在发送真正请求之前，会先发送一次预检请求，来判断服务端是否支持非简单请求的类方法。
    预检 请求包含跟简单请求一样的 Origin、Access-Control-Request-Method 真实请求的方法 如 PUT、Access-Control-Request-Headers自定义复杂头部（可选）
  2. 预检通过之后，浏览器会再次使用真实请求方法发起请求.
  3. 如果先发送一个方法为 OPTIONS 的预请求 (preflight request) 获得的回应是拒绝性质的，比如404\403\500 等 http 状态，就会停止 post、put 等请求的发出。

预检请求的特点：

  1. 请求信息 
    OPTIONS不会携带请求参数和cookie,也不会对服务器数据产生副作用
    携带 Access-Control-Request-Method 和 Access-Control-Request-Headers
       Access-Control-Request-Method：内容是实际请求的种类，告诉服务器实际请求使用的方法
            Access-Control-Request-Headers：内容是一个以逗号分隔的列表，告诉服务器实际请求复杂请求所使用的头部 
  2. 服务器回传信息    

                Access-Control-Allow-Origin： 域，这个是肯定会返回的

      Access-Control-Allow-Methods： 服务器允许客户端使用那些方法发起请求。这个也是肯定会返回的

      Access-Control-Allow-Headers： 当预请求中包含 Access-Control-Request-Headers 时一定会有）这是对预请求当中 Access-Control-Request-Headers 的回复，也是以逗号分隔的列表，可以返回所有支持的头部表明服务器允许请求中携带字段

预见请求如何优化：

        OPTIONS 预检请求的结果可以被缓存!!!

MDN :

        OPTION 返回结果可以被缓存的最长时间（秒）。 在 Firefox 中，上限是 24 小时 （即 86400 秒）。 在 Chromium v76 之前， 上限是 10 分钟（即 600 秒)。 从 Chromium v76 开始，上限是 2 小时（即 7200 秒)。 Chromium 同时规定了一个默认值 5 秒。 如果值为 -1，表示禁用缓存，则每次请求前都需要使用 OPTIONS 预检请求。

4.2 JSONP 跨域解决

在浏览器中，我们可以使用script标签来加载js脚本，如果使用过cdn的童鞋应该知道，我们可以直接填写不同源的地址，因为浏览器允许script加载跨域资源。我们可以通过该标签来加载动态脚本，但是需要服务端调整数据结构。

相当于让服务端输出调用js函数的语句

首先我们在html中写下以下代码，创建一个script，调用动态脚本

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Siam - script 同源解决</title>
</head>
<body><h1>这是原始页面的内容</h1><script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script><script>// 这里需要先写好相应的回调处理函数，然后服务端的脚本调用 传参function test(text){$('body').append(text);}$(function(){$("body").append("<script src='http://www.siam2.com/script.php'><\/script>");})</script>
</body>
</html>

服务端脚本：

<?php
echo "test('这是返回内容')";

这样子也可以正常的运行返回.

优点:

  • 兼容性好，现在主流的跨域解决方案之一 缺点
  • 只支持get
  • 要确定 JSONP 请求是否失败并不容易。虽然 HTML5 给 script 标签新增了一个 onerror 事件处理程序，但是存在兼容性问题

4.3  反向代理解决跨域

        除了使用以上的两种方案，我们还可以在nginx 配置反向代理，在www.siam.com下某个路径代理到www.siam2.com即可

我们打开nginx.conf

server {listen       80;server_name  www.siam.com;#charset koi8-r;#access_log  logs/host.access.log  main;location / {root   html;index  index.html index.htm;}location ^~ /apis {proxy_pass http://www.siam2.com;}
}

        通过反向代理，我们就可以通过 www.siam.com/apis/index2.php 这个路径来访问原来部署在www.siam2.com下的内容。

        这样子就是同源请求了。

5. 跨域访问限制是浏览器安全行为！！！

  1. 误区：
            由于在服务器上做相关匹配就可以允许跨域，所以很多人认为之所以不能跨域访问，是服务器做了相关限制？！这是不对的。
  2. 跨域访问限制是浏览器的行为。
               阻止你跨域进行 Ajax 请求的是浏览器，不是服务端，并且事实上服务端已经返回了数据到本地，被浏览器拦截下来了，没有呈现到页面上来还抛出了异常。
  3. 如果跨域限制是浏览器行为，为什么是在服务器上做相关配置？
            我们可以理解为“服务器授权”，默认情况下浏览器是不允许跨域的，这样可以为各站点数据增加一点安全保护，但如果你的站点在响应请求的时候，带回信息告诉浏览器：“没事，你尽管让他们都来请求好了，我有什么给什么。”，这样一来跨域的限制就解除了。
  4. 为什么App调接口没有跨域的问题？    
           因为跨域的限制是浏览器行为，服务器本身并没有限制访问的源是谁。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【QT】解决QTableView修改合并单元格内容无法修改到合并范围内的单元格

【QT】解决QTableView修改合并单元格内容无法修改到合并范围内的单元格

问题：修改合并单元格的内容 修改合并单元格的内容时，希望直接修改到合并范围内的单元格，Qt没有实现这个功能，需要自己写出 Delegate来实现 方案：Delegate class EditDelegate : public QStyledItemDelegate {public:EditDelegate(QTableView *view): tableView(view){}pu…
阅读更多...
JS基础之模块化

JS基础之模块化

JS基础之模块化 JS模块化模块化前端发展 什么是模块&#xff1f;怎么定义模块化IIFE匿名函数自调用IIFE模式增强模块化的好处 JS模块化 模块化 JS DOM操作 代码规范管理的标准 不同模块间的管理模块内部自组织 标准bundler (模块构建工具) ESNext TS -> ES5 前端发展 生态 …
阅读更多...
Python数据处理必备：Pandas DataFrame中行迭代技巧大曝光！

Python数据处理必备：Pandas DataFrame中行迭代技巧大曝光！

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在数据分析和处理中&#xff0c;Pandas是Python中最常用的库之一&#xff0c;而DataFrame是Pandas的核心数据结构之一。迭代DataFrame中的行是一种常见的操作&#xff0c;本文将详细介绍几种迭代DataFrame行的方…
阅读更多...
k8s集群内部署nexus

k8s集群内部署nexus

一、前言 在k8s集群中部署nexus服务需要使用到pv、pvc服务来存储nexus的数据&#xff0c;需要使用service服务来提供对外访问nexus服务的端口&#xff0c;需要使用deployment服务来管理nexus服务&#xff0c;接下来就是用这些服务来在k8s集群中搭建nexus&#xff0c;pv服务使用…
阅读更多...
爱芯派pro通过无线网卡rtl8188eu连接热点

爱芯派pro通过无线网卡rtl8188eu连接热点

爱芯派pro通过无线网卡rtl8188eu连接热点 爱芯派pro目前的底板的pcie的复位有问题&#xff0c;所以pcie接口无法挂载上去&#xff0c;所以自己购买的rtl8822网卡也用不了&#xff0c;然后想起来自己还有正点原子的rtl8188eu网卡&#xff0c;但是没有和工作人员进行摸索后才知道…
阅读更多...
如何禁止外网访问公司内网服务器

如何禁止外网访问公司内网服务器

对于企业网络&#xff0c;经常会用到访问控制&#xff0c;例如限制员工的上网时间&#xff1f;或如何控制各部门之间的网络互通等等&#xff0c;在实际企业网络项目中经常会遇到&#xff0c;这里面我们就可以用到ACL访问列表控制了&#xff0c;本期我们一起来看下&#xff0c;如…
阅读更多...
SpringBoot已经禁掉了循环依赖！

SpringBoot已经禁掉了循环依赖！

还在问循环依赖嘛&#xff1f;SpringBoot已经禁掉了循环依赖&#xff01; 首发2023-12-18 11:26yuan人生 如果现在面试时还有人问你循环依赖&#xff0c;你就这样怼他&#xff1a;循环依赖是一种代码质量低下的表现&#xff0c;springboot2.6之后的版本已经默认禁用了。 Spr…
阅读更多...
保护电脑安全，火绒安全助手 V5.0

保护电脑安全，火绒安全助手 V5.0

火绒安全软件&#xff0c;也称为“火绒安全助手”是一款由中国研发的综合安全软件。火绒安全软件旨在为计算机用户提供全面的安全保护&#xff0c;包括防病毒、反恶意软件、网络安全、系统优化等功能。 火绒安全的功能 病毒防护&#xff1a;火绒提供实时的病毒和恶意软件扫描…
阅读更多...
排序算法——快排

排序算法——快排

快速排序算法最早是由图灵奖获得者Tony Hoare设计出来的,他在形式化方法理论以 及ALGOL.60编程语言的发明中都有卓越的贡献,是20世纪最伟大的计算机科学家之—。 而这快速排序算法只是他众多贡献中的—个小发明而已。 快速排序&#xff08;Quick Sort&#xff09;的基本算法思…
阅读更多...
C语言—每日选择题—Day57

C语言—每日选择题—Day57

指针相关博客 打响指针的第一枪&#xff1a;指针家族-CSDN博客 深入理解&#xff1a;指针变量的解引用 与 加法运算-CSDN博客 第一题 1. 下面程序段&#xff08;&#xff09; char *str[] {"ABC", "DEF", "GHI"}; puts(str[1]); A&#xff1a;A…
阅读更多...
用户行为分析遇到的问题-ubantu16,hadoop3.1.3

用户行为分析遇到的问题-ubantu16,hadoop3.1.3

用户行为分析传送门 我的版本 ubantu16 hadoop 3.1.3 habse 2.2.2 hive3.1.3 zookeeper3.8.3 sqoop 1.46/1.47 我sqoop把MySQL数据往hbase导数据时候有问题 重磅&#xff1a;大数据课程实验案例&#xff1a;网站用户行为分析&#xff08;免费共享&#xff09; 用户行为分析-小…
阅读更多...
5G+云渲染技术：将如何快速推进XR和元宇宙？

5G+云渲染技术：将如何快速推进XR和元宇宙？

XR&#xff08;扩展现实&#xff09;领域正在以惊人的速度增长。目前&#xff0c;到 2024 年&#xff0c;一些专家表示这个行业的价值将达到 3000 亿美元。 这个行业发展如此迅速的部分原因是 XR 将在商业环境中的带来巨大利益。近年来&#xff0c;很多企业遇到了将增强现实和…
阅读更多...
RabbitMQ不公平分发问题分析及问题解决

RabbitMQ不公平分发问题分析及问题解决

1.不公平分发 1.1 不公平分发策略是什么&#xff1f; 在 RabbitMQ 中&#xff0c;不公平分发&#xff08;Unfair Dispatch&#xff09;是指当多个消费者&#xff08;Consumers&#xff09;同时订阅同一个队列&#xff08;Queue&#xff09;时&#xff0c;消息的分发机制是不公…
阅读更多...
I.MX6ULL_Linux_驱动篇(48)linux I2C驱动

I.MX6ULL_Linux_驱动篇(48)linux I2C驱动

I2C 是很常用的一个串行通信接口&#xff0c;用于连接各种外设、传感器等器件。本章我们来学习一下如何在 Linux 下开发 I2C 接口器件驱动&#xff0c;重点是学习 Linux 下的 I2C 驱动框架&#xff0c;按照指定的框架去编写 I2C 设备驱动。本章同样以 I.MX6U-ALPHA 开发板上的 …
阅读更多...
Java数据结构-模拟ArrayList集合思想，手写底层源码(1)，底层数据结构是数组，编写add添加方法，正序打印和倒叙打印

Java数据结构-模拟ArrayList集合思想，手写底层源码(1)，底层数据结构是数组，编写add添加方法，正序打印和倒叙打印

package com.atguigu.structure; public class Demo02_arrayList {public static void main(String[] args) {MyGenericArrayListV1 arrayListV1 new MyGenericArrayListV1();//arr.add(element:100,index:1);下标越界&#xff0c;无法插入//初始化&#xff08;第一次添加&…
阅读更多...
Java 栈和队列的交互实现

Java 栈和队列的交互实现

文章目录 队列和栈的区别一.用队列模拟实现栈1.1入栈1.2出栈1.3返回栈顶元素1.4判断栈是否为空 二.用栈模拟实现队列2.1 入队2.2出队2.3peek2.4判断队列是否为空 三.完整代码3.1 队列模拟实现栈3.2栈模拟实现队列 队列和栈的区别 栈和队列都是常用的数据结构&#xff0c;它们的…
阅读更多...
令人惊叹的代码技巧

令人惊叹的代码技巧

在编程世界中&#xff0c;有一些令人惊叹的代码技巧和巧妙的实现方式。以下是一些我见过的令人印象深刻的代码技巧&#xff1a; 函数式编程魔法&#xff1a; 使用函数式编程的一些特性&#xff0c;比如高阶函数、匿名函数和Lambda表达式&#xff0c;可以使代码更为简洁、易读。…
阅读更多...
飞天使-k8s知识点1-kubernetes架构简述

飞天使-k8s知识点1-kubernetes架构简述

文章目录 名词功能要点 k8s核心要素CNCF 云原生框架简介k8s组建介绍 名词 CI 持续集成, 自动化构建和测试&#xff1a;通过使用自动化构建工具和自动化测试套件&#xff0c;持续集成可以帮助开发人员自动构建和测试他们的代码。这样可以快速检测到潜在的问题&#xff0c;并及早…
阅读更多...
揭秘Spark学习框架网站：让你轻松掌握大数据处理神器！

揭秘Spark学习框架网站：让你轻松掌握大数据处理神器！

介绍&#xff1a;Apache Spark是一个开源的大数据处理框架&#xff0c;它致力于实现高速、易用和复杂分析。Spark最初由加州大学伯克利分校的AMPLab于2009年开始开发&#xff0c;并于2010年成为Apache的开源项目之一。由于其出色的性能表现与丰富的功能特性&#xff0c;Spark已…
阅读更多...
【计算机四级（网络工程师）笔记】操作系统概论

【计算机四级（网络工程师）笔记】操作系统概论

目录 一、OS的概念 1.1OS的定义 1.2OS的特征 1.2.1并发性 1.2.2共享性 1.2.3随机性 1.3研究OS的观点 1.3.1软件的观点 1.3.2资源管理器的观点 1.3.3进程的观点 1.3.4虚拟机的观点 1.3.5服务提供者的观点 二、OS的分类 2.1批处理操作系统 2.2分时操作系统 2.3实时操作系统 2.4嵌…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023