看后端程序员调试CORS的姿势

# 目录

为什么有同源策略？

  • 需要解决的问题

CORS跨域请求方案

  • preflight
  • withCredentials
  • 附：高效、优雅地调试CORS实现

为什么有同源策略？ 

同源策略Same Origin Policy 是一种约定，是浏览器最核心的安全功能：

 该策略允许在源自同一站点的页面上运行的脚本在没有特定限制的情况下访问彼此的数据，但阻止脚本访问存储在不同域中的数据。

所谓同源是指域名、协议、端口相同。

同源策略主要是为了安全，如果浏览器没有同源限制，那么：

        ① 某域下的Cookie等与该域相关的密切数据可以任意读取

        ② 不同域下DOM任意操作，篡改

        ③ 恶意网站能随意执行Ajax脚本偷取隐私数据

针对以上第③点：举个栗子：

用户正在访问银行网站B但未注销。然后用户转到另一个站点A，该站点在后台运行一些恶意JavaScript代码，该代码从银行站点B请求数据。由于用户仍然登录银行站点，恶意代码可以执行用户在银行站点B上执行的任何操作。

例如，它可以获得用户上次交易的列表，创建新交易等。这是因为浏览器可以基于银行站点的域向银行站点发送和接收会话cookie。

访问恶意站点的用户以为他访问的站点无法访问银行会话cookie。虽然恶意网站下JavaScript确实无法直接访问银行会话cookie，但它仍然可以通过银行网站的会话cookie向银行网站发送和接收请求。

同源策略在实施中需要解决的问题:

同源策略限制 通过脚本访问不同域的数据，大棒一挥， 关闭了正常访问外部域名数据的可能。
有以下变通方法：

  • 实现CORS (Cross-Origin Resource Sharing)

  • 使用JSONP (JSON Padding)

  • Use postMessage method

  • 建立一个本地代理服务器，这样先同源访问，由代理服务器转发请求

 

CORS跨域请求方案

CORS是一个服务器允许放松同源策略的W3C标准，服务器可以显式允许同源请求并且拒绝其他的非同源访问。

CORS标准描述了新的HTTP标头，它为浏览器提供了一种仅在获得许可时才能请求远程URL的方法。尽管服务器可以执行某些验证和授权，但浏览器通常负责支持这些标头并遵守它们所施加的限制。

Request headers
  • Origin
  • Access-Control-Request-Method
  • Access-Control-Request-Headers
Response headers
  • Access-Control-Allow-Origin
  • Access-Control-Allow-Credentials
  • Access-Control-Expose-Headers
  • Access-Control-Max-Age
  • Access-Control-Allow-Methods
  • Access-Control-Allow-Headers

举个橘子:

CORS规范

         ① 浏览器使用XmlHttpRequest发起跨域Ajax请求，浏览器会自动携带Origin请求

         ② 服务器有一套自己的的CORS逻辑，这个逻辑会在服务端响应头：Access-Control--*******--中体现

                 举例： Access-Control-Allow-Origin: */Origin/null // 该响应头会3种可能值

         ③ 浏览器会遵守Access-Control--*******-- 响应头对应值所施加的限制

GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
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
Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
Origin: http://foo.exampleHTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61 
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xmlBODY

 

预检Preflight

        对于可以修改数据的Ajax和HTTP请求方法（通常是GET以外的HTTP方法，或者某些MIME类型的POST用法），CORS规范要求浏览器“预检”请求，

使用HTTP OPTIONS请求方法从服务器请求支持的方法（由浏览器发起），然后，在服务器“批准”时，使用实际的HTTP请求方法发送实际请求。

上图描述了浏览器是是怎样决定使用【简单请求】还是 【预检XHR请求】

const invocation = new XMLHttpRequest();
const url = 'http://bar.other/resources/post-here/';
const body = '<?xml version="1.0"?><person><name>Arun</name></person>';function callOtherDomain(){if(invocation){invocation.open('POST', url, true);invocation.setRequestHeader('X-PINGOTHER', 'pingpong');invocation.setRequestHeader('Content-Type', 'application/xml');invocation.onreadystatechange = handler;invocation.send(body); }
}......
// 以上使用POST 发送了一个xml，同时自定义了一个request header： X-PINGOTHER， 该跨域请求必定会触发浏览器预检行为

 

 

携带凭据跨域

     默认情况下，浏览器在XMLHttpRequest请求中不会发送凭据 （凭据包括HTTP cookies 和 Http认证信息比如 Authorization头)。

 访问的外站API需要授权，这时就涉及携带凭据跨域：

const invocation = new XMLHttpRequest();
const url = 'http://bar.other/resources/credentialed-content/';function callOtherDomain(){if(invocation) {invocation.open('GET', url, true);invocation.withCredentials = true;   // 该标记设定在XMLHttpRequest中发送凭据invocation.onreadystatechange = handler;invocation.send(); }
}

 

GET /resources/access-control-with-credentials/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
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
Referer: http://foo.example/examples/credential.html
Origin: http://foo.example
Cookie: pageAccess=2HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:34:52 GMT
Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
X-Powered-By: PHP/5.2.6
Access-Control-Allow-Origin: http://foo.example    // 当响应的是一个携带凭据的请求，服务端必须为Access-Control-Allow-Origin响应头指定一个Origin，而不能再用 * 通配符。
Access-Control-Allow-Credentials: true
Cache-Control: no-cache
Pragma: no-cache
Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT  // 设置新的Cookie
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 106
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain[text/plain payload]

需要注意：

  1. 以上携带请求凭据跨域，若响应头Access-Control-Allow-Origin被指定为“*”， 请求将报错； 也就是说 在携带凭据跨域的时候，服务器响应头不允许使用囫囵吞枣的* 通配符。

  2. 虽然浏览器提示报错；实际上浏览器会取得Response，但是浏览器会遵守CORS规范阻止你的代码访问响应体。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials。
https://stackoverflow.com/questions/46737291/cors-error-but-data-is-fetched-regardless
The browser itself runs into no error in getting the response. But your code runs into an error because it’s trying to access a response that’s not there — because the browser isn’t exposing the response to your code.

 

附：一种高效、优雅地调试CORS实现的方法

https://stackoverflow.com/questions/12173990/how-can-you-debug-a-cors-request-with-curl/12179364#12179364

CORS规范很大程度体现了服务端对资源的安全策略， 作为后端开发人员，调试CORS规范不是一个简单的事情：

直观上：需要搭建跨域服务器、构建AJAX脚本请求。

使用Curl命令来调试CORS规范， 好嗨哟。
Curl是一个利用URl规则在命令行下工作的文件传输工具，可以说是一款强大的http命令行工具。
https://curl.haxx.se/docs/manpage.html
下面curl命令演示了在某网站跨域Post请求外站api时 触发的预检options请求：
curl "https://A.com/api/3.0/drilldown/query" -X OPTIONS -H "Access-Control-Request-Method: POST" -H "Origin: http://www.example.com.cn" -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36" -H "Access-Control-Request-Headers: content-type"  --verbose

-X 请求动词

-H 指定请求头

--verbose 输出详细内容

结果如下：

 

以上从为什么？怎么做？更高效的完成？ 三方面讲述了CORS，希望对大家有所帮助。 

 

作者：JulianHuang

感谢您的认真阅读，如有问题请大胆斧正；觉得有用，请下方或加关注。

本文欢迎转载，但请保留此段声明，且在文章页面明显位置注明本文的作者及原文链接。

转载于:https://www.cnblogs.com/JulianHuang/p/10337980.html

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

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

相关文章

图论算法（四）--最小生成树的Kruskal [ 加边 ] 、Prim [ 加点 ] 的解法（JAVA）

图论算法（四）--最小生成树的Kruskal [ 加边 ] 、Prim [ 加点 ] 的解法（JAVA）

之前我们介绍了求最短路径算法&#xff0c;现在又讲最小生成树算法&#xff0c;这两个算法有什么区别呢&#xff1f; 首先要明确&#xff0c;最短路径和最小生成树是两个不同的概念。 最短路径是对于一个图的两个结点而言的。在一个图中&#xff0c;结点A通过某些结点和边可以…
阅读更多...
express+handlebars 快速搭建网站前后台

express+handlebars 快速搭建网站前后台

最近在重构公司网站&#xff0c;原来网站使用PHP&#xff0c;前后端不分离&#xff0c;添加与更新网站内容仍使用原始方法&#xff0c;先出布局再把调好的布局给PHP后端开发&#xff0c;花时间长&#xff0c;维护不易。因此决定将网站前后端分离&#xff0c;核心功能含网站下单…
阅读更多...
定义一个二维数组并输入数据，将二维数组元素的值按升序排列，并输出排序后的二维数组。

定义一个二维数组并输入数据，将二维数组元素的值按升序排列，并输出排序后的二维数组。

目录 问题&#xff1a; 回顾&#xff1a; 给出两种做法&#xff1a; 解法一&#xff1a;调用qsort 函数进行排序 代码&#xff1a; 运行结果&#xff1a; 解法二&#xff1a;冒泡排序 代码&#xff1a; 运行结果: 回顾里的4种方法的模板参考&#xff1a; 1.冒泡排序…
阅读更多...
第五届省赛（软件类）真题----Java大学C组答案及解析

第五届省赛（软件类）真题----Java大学C组答案及解析

第五届省赛&#xff08;软件类&#xff09;真题—-Java大学C组答案及解析 杨辉三角调和级数回文素数过大年位平方和单位分数n级台阶 一、杨辉三角 二项式的系数规律&#xff0c;我国数学家很早就发现了。 如【图1.png】&#xff0c;我国南宋数学家杨辉1261年所著的《详解九…
阅读更多...
Angular4.x 安装|创建项目|目录结构|创建组件

Angular4.x 安装|创建项目|目录结构|创建组件

Angular4.x 安装|创建项目|目录结构|创建组件 安装最新版本的 nodejs node.js 官网&#xff1a;https://nodejs.org/zh-cn/ 去官网下载 node.js&#xff0c;下一步下一步就可以了。只要 node.js 安装成功&#xff0c;那么 npm 也会帮你安装完成&#xff01; 注意&#xff1a;请…
阅读更多...
第五届省赛（软件类）真题----Java大学B组答案及解析

第五届省赛（软件类）真题----Java大学B组答案及解析

第五届省赛&#xff08;软件类&#xff09;真题—-Java大学B组答案及解析 正则切分调和级数n的n次幂七对数字勾股定理九阶数独G将军 一、正则切分 java中提供了对正则表达式的支持。 有的时候&#xff0c;恰当地使用正则&#xff0c;可以让我们的工作事半功倍&#xff01; …
阅读更多...
第五届省赛（软件类）真题----Java大学A组答案及解析

第五届省赛（软件类）真题----Java大学A组答案及解析

第五届省赛&#xff08;软件类&#xff09;真题—-Java大学A组答案及解析 子序列最大长度莱布尼茨公式n的n次幂七对数字勾股定理九阶数独矩阵射线 一、子序列最大长度 一个串的子串是指该串的一个连续的局部。如果不要求连续&#xff0c;则可称为它的子序列。 比如对串&…
阅读更多...
第六届省赛（软件类）真题----Java大学C组答案及解析

第六届省赛（软件类）真题----Java大学C组答案及解析

第六届省赛&#xff08;软件类&#xff09;真题----Java大学C组答案及解析隔行变色立方尾无穷分数循环节长度格子中输出奇妙的数字加法变乘法移动距离打印大X垒骰子 一、隔行变色 Excel表的格子很多&#xff0c;为了避免把某行的数据和相邻行混淆&#xff0c;可以采用隔行变色的…
阅读更多...
spring_01概念及案例

spring_01概念及案例

1.什么是IOC?　　 IOC概念:inverse of Controll,控制反转,所谓控制反转,就是把创建对象和维护对象关系的权利从程序中转移到spring的容器中(applicationContext.xml),而程序本身不再维护 2.什么是di? dependency injection,依赖注入,di和IOC是一个概念,spring的设计者认为di等…
阅读更多...
斐波那契数列（二）--矩阵优化算法

斐波那契数列（二）--矩阵优化算法

之前写了一篇从斐波那契数列分析递归与动态规划&#xff08;JAVA&#xff09;来优化斐波那契数列&#xff0c;这样可以使算法的时间复杂度从O(n^2)变到O(n),这是使用递归公式f(n)f(n-1)f(n-2)求斐波那契数列的最优算法&#xff0c;但是这只是一维世界下的极限。下面我们将其从一…
阅读更多...
第六届省赛（软件类）真题----Java大学B组答案及解析

第六届省赛（软件类）真题----Java大学B组答案及解析

第六届省赛&#xff08;软件类&#xff09;真题----Java大学B组答案及解析三角形面积立方变自身三羊献瑞循环节长度九数组分数加法变乘法牌型种数饮料换购垒骰子生命之树 一、三角形面积如【图1】所示。图中的所有小方格面积都是1。那么&#xff0c;图中的三角形面积应该是多少…
阅读更多...
【学习总结】GirlsInAI ML-diary day-11-while循环

【学习总结】GirlsInAI ML-diary day-11-while循环

【学习总结】GirlsInAI ML-diary 总 原博github链接-day11 认识while循环执行 对于while/break/continue的认识 新值替换变量 一般while语句 无限循环 & break continue 作业 1-更新变量 这一条没什么新的东西&#xff0c;别的语言也一样&#xff1a;python在赋值时&#x…
阅读更多...
@PathVariable、@RequestParam、@RequestBody注解

@PathVariable、@RequestParam、@RequestBody注解

讲解更加详细的参考资料 https://blog.csdn.net/u011410529/article/details/66974974 https://www.cnblogs.com/soul-wonder/p/8920553.html PathVariable注解的作用&#xff0c;获取请求地址中传递的参数&#xff0c;即&#xff1a;从URL模版中取值。 RequestParam 是从reque…
阅读更多...
深入浅出讲算法思想--蛮力法思想分析及应用

深入浅出讲算法思想--蛮力法思想分析及应用

蛮力法&#xff08;brute force method&#xff0c;也称为穷举法或枚举法&#xff09;是一种简单直接地解决问题的方法&#xff0c;常常直接基于问题的描述&#xff0c;所以&#xff0c;蛮力法也是最容易应用的方法。虽然&#xff0c;用蛮力法设计的算法时间特性往往也是最低的…
阅读更多...
光耦在短距离通信中的应用

光耦在短距离通信中的应用

在高低压隔离系统设计中&#xff0c;难免会使用光耦来通信。在选择光耦器件时&#xff0c;需要考虑光耦允许的最大通信速率&#xff0c;否则在高速通信时会失败. 对于高速的光耦应用时&#xff0c;需要注意电流传输比率和开关速度。 参考文档《Basic Characteristics and Appli…
阅读更多...
从NetCore报错到MySql安全

从NetCore报错到MySql安全

从NetCore报错到MySql安全 原文:从NetCore报错到MySql安全之前项目在测试服务器上的一些接口时不时会报出下面的错误&#xff1a;&#xff08;采用Abp框架&#xff09; "SocketException: 你的主机中的软件中止了一个已建立的连接。 STACK TRACE: at MySqlConnector.Pr…
阅读更多...
减治法在查找算法中的应用（JAVA）--快速查找

减治法在查找算法中的应用（JAVA）--快速查找

减治法在查找算法中的应用 快速查找&#xff1a;选择问题是求一个n个数列表的第k个最小元素的问题&#xff0c;这个数k被称为顺序统计量。对于k1或kn来说&#xff0c;这并没有什么意义&#xff0c;我们通常会要找出这样的元素&#xff1a;该元素比列表中一半元素大&#xff0…
阅读更多...
JavaScript中使用Json

JavaScript中使用Json

转载于:https://www.cnblogs.com/lyonwu/p/10368989.html
阅读更多...
Navicat Premium试用期破解方法（转）

Navicat Premium试用期破解方法（转）

转载网址https://blog.csdn.net/Jason_Julie/article/details/82864187 1、按步骤安装Navicat Premium&#xff0c;如果没有可以去官网下载&#xff1a;http://www.navicat.com.cn/download/navicat-premium 2、安装好后下载激活文件&#xff1a;https://pan.baidu.com/s/1kVgT…
阅读更多...
减治法在生成子集问题中的应用（JAVA）--递归、二进制反射格雷码

减治法在生成子集问题中的应用（JAVA）--递归、二进制反射格雷码

减治法在生成组合对象问题中的应用 生成子集问题&#xff1a;经典的背包问题就是求解一个最优子集的问题&#xff0c;这里我们来讨论一个更简单的问题。对于任意一个集合来说&#xff0c;它都存在2^n个子集&#xff08;一个集合所有的子集集合称为幂集&#xff09;。 1&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023