亲测CORS（跨域资源共享）

最新推荐文章于 2021-08-26 14:34:13 发布
最新推荐文章于 2021-08-26 14:34:13 发布
阅读量164 收藏
点赞数
文章标签： json 后端 python
原文链接：https://my.oschina.net/hulingfeng/blog/2051255
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

随着软件开发过程分工越来越细，前段开发和后端开发、移动端开发越来越分离，后端设计的RESTFul API需要被其他的应用访问，因浏览器的安全限制，在跨站点进行访问的时候会有安全限制；CORS解决不同的站点之间的资源共享问题，关于CORS可以参看维基百科

实验环境

站点1是一个HTML页面，可以理解为RESTFul API的消费端

<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <h1>for test</h1>
    <script src="{{static_url('jquery-1.6.2.min.js')}}"></script>
    <script type="text/javascript">

        $(function () {
            //alert('aaaaaaa');
            $.ajax(
                {
                    url: "http://localhost:8082/api/test_cors",
                    success: function (res) {
                        alert("bbbbbb");
                    },
                });
            $.ajax(
                {
                    url: "http://localhost:8082/api/test_cors",
                    //data:JSON.stringify({a:"123",b:"345"}),
                    //contentType:"application/json",
					data:{a:"123",b:"345"},
                    type:'POST',
                    dataType: "json",
                    headers:{"x-token":"aaaaaaaaaasdfjsd;fajasd;fjsd;jfad;sfjasd;fjasd"},
                    success: function (res) {
                        alert("cccc");
                    },
                }); 
        });
    </script>
</body>
</html>

页面运行在http://localhost:8888下,功能是从另外一个站点http://localhost:8082/api/test_cors上进行GET和POST请求,进行POST请求分为两种情况

  1. content-type=='application/json'
  2. content-type=='application/x-www-form-urlencoded' #默认情况下，ajax都采用这种方式进行POST提交

站点2可以理解为一个 RESTFul API的提供者，提供的服务供其他的站点进行访问

代码如下：

# -*- coding:utf-8  -*- 

from tornado.gen import coroutine,IOLoop
from tornado.options import parse_command_line,options
from tornado.web import RequestHandler,Application ,escape
from tornado.log import gen_log

def main():
    parse_command_line()
    app=Application(handlers=[
        (r'/api/test_cors',TestService)
    ],debug=True)
    app.listen('8082')
    IOLoop.current().start()


class CORSHandler(RequestHandler):
    """
    跨站点请求的处理(Handler)器
    """    
    def options(self):
        gen_log.info('entry options method')
        #self._add_cors_request_headers()

    def _add_cors_request_headers(self):
        """
        添加跨站点请求的头信息
        """
        headers=self.request.headers
        origin=headers.get("Origin",None)
        allow_method=headers.get('Access-Control-Request-Method','')
        custome_header=headers.get('Access-Control-Request-Headers','')
        # output all follow to client
        self.add_header('Access-Control-Allow-Origin',origin or '*')
        self.add_header('Access-Control-Allow-Methods',','.join(self.SUPPORTED_METHODS))
        self.add_header('Access-Control-Allow-Headers',custome_header)
        self.add_header('Access-Control-Allow-Credentials',True)
        self.add_header('Access-Control-Max-Age',1728000)

    def get_current_user(self):
        """
        获取当前用户
        :return: 
        """
        return {
            "empCd":"12860",
            "pwd":"nothing"
        }

    @property
    def user(self):
        return self.current_user

    def write_json(self,data,code=0,err_msg=None):
        """"""
        #self._add_cors_request_headers()
        self.set_header("content-type","application/json")
        self.write({"data":data,"code":code,"err_msg":err_msg})


class TestService(CORSHandler):
    @coroutine
    def get(self):
        data = {
            "a": "a",
            "b": "b"
        }
        self.write_json(data)

    @coroutine
    def post(self):
        # todo if content-type is application/json
        #json_body=escape.json_decode(self.request.body)
        #a = json_body.get("a")
        #b = json_body.get("b")

        # todo if content-type is application/x-www-form-urlencoded
        a=self.get_argument('a')
        b=self.get_argument('b')
        self.write_json({"a": a, "b": b})

if __name__ =='__main__':
    main()

实验分为两部分

  • 简单请求的跨站点访问验证

这里的简单请求时指，请求的content-type是application/x-www-form-urlencoded和multipart/form-data

从代码来看浏览器应该会发送两个网路请求给服务器，如果服务器正确的响应了浏览器的请求则浏览器会弹出提示框， 上述代码运行效果如下:

实际上没有接收到浏览器的提示框，在控制台看到跨域的警告消息。为了解决跨域的警告，开启cors的支持。 将代码的self._add_cors_reuest_headers的注释取消掉

 def write_json(self,data,code=0,err_msg=None):
        """"""
        self._add_cors_reuest_headers() #开启cors的支持

开启cors的支持后，运行效果: 警告消失了 发出去的请求数是2个

  • 非简单请求的跨站点访问验证

　非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。随着前后端开发的分离合前端开发的很多ｊｓ框架发起的网路请求默认content-type都是application/json不是application/x-www-form-urlencoded．

修改html中的代码，使ajax进行post提交的时候，发送的content-type是application/json且表单的数据修改为json的格式，修改内容如下：

修改前:

					url: "http://localhost:8082/api/test_cors",
                    //data:JSON.stringify({a:"123",b:"345"}),
                    //contentType:"application/json",
					data:{a:"123",b:"345"},
					省略...

修改后:

					url: "http://localhost:8082/api/test_cors",
                    data:JSON.stringify({a:"123",b:"345"}),
                    contentType:"application/json",
					//data:{a:"123",b:"345"},
					省略...

刷新页面，运行效果如下: 提示有错误

从网络请求中可以看到，多了一个OPTIONS的请求，但是没有POST的请求。按照CORS的规范，非普通请求会预先发起一个OPTIONS请求给跨站点的资源，如果OPTIONS响应的内容允许访问则再次发起POST请求。出现OPTIONS请求正常但是POST请求没有发送的情况，可能的问题出来OPTIONS方法的代码。修改OPTIONS的代码:

修改前:

def options(self):
        gen_log.info('entry options method')
        #self._add_cors_request_headers()

@coroutine
    def post(self):
        # todo if content-type is application/json
        #json_body=escape.json_decode(self.request.body)
        #a = json_body.get("a")
        #b = json_body.get("b")

        # todo if content-type is application/x-www-form-urlencoded
        a=self.get_argument('a')
        b=self.get_argument('b')

修改后:

def options(self):
        gen_log.info('entry options method')
        self._add_cors_request_headers()

@coroutine
def post(self):
    # todo if content-type is application/json
    json_body=escape.json_decode(self.request.body)
    a = json_body.get("a")
    b = json_body.get("b")

    # todo if content-type is application/x-www-form-urlencoded
    #a=self.get_argument('a')
    #b=self.get_argument('b')

刷新页面查看运行效果:

正常的访问了其他站点上的资源，以前的过程一直有一个核心的方法在起作用，可以看看:

def _add_cors_request_headers(self):
        """
        添加跨站点请求的头信息
        """
        headers=self.request.headers
        origin=headers.get("Origin",None)
        allow_method=headers.get('Access-Control-Request-Method','')
        custome_header=headers.get('Access-Control-Request-Headers','')
        # output all follow to client
        self.add_header('Access-Control-Allow-Origin',origin or '*')
        self.add_header('Access-Control-Allow-Methods',','.join(self.SUPPORTED_METHODS))
        self.add_header('Access-Control-Allow-Headers',custome_header)
        self.add_header('Access-Control-Allow-Credentials',True)
        self.add_header('Access-Control-Max-Age',1728000)

详细的解释参看阮一峰的网络日志。

小结:

CORS很好的解决了前后端分离开发时的跨站点请求问题，让前后端协同更加顺利。当前后端分离开发后也可以采用类似NGINX反向代理的方案来解决API的调用问题，但CORS配置更少，更透明。遗憾的是目前在IE浏览器上IE9以下都不支持CORS。

参考链接:

转载于:https://my.oschina.net/hulingfeng/blog/2051255

weixin_34320159
关注
CORS跨域资源共享漏洞
谢公子的博客
01-16 1万+
目录 CORS跨域资源共享 简单跨域请求 非简单请求 CORS的安全问题 有关于浏览器的同源策略和如何跨域获取资源，传送门——>浏览器同源策略和跨域的实现方法 同源策略（SOP）限制了应用程序之间的信息共享，并且仅允许在托管应用程序的域内共享。这有效防止了系统机密信息的泄露。但与此同时，也带来了另外的问题。随着Web应用程序和微服务使用的日益增长，出于实用目的往往需要将信息从一...
CORS跨域资源共享漏洞验证测试
afei001
01-17 3309
目录 1.前言 2.CORS漏洞概述 3.漏洞验证 3.1 curl指定Origin验证 3.2 Burpsuite抓包验证 3.3 CORS_Scanner工具验证 4.CORS_POC.html 5.漏洞修复 1.前言 之前在对网站进行安全性测试时，使用AWVS漏扫发现存在一个CORS跨域资源共享漏洞。记录一下验证及修复方式。 afei 漏洞等级：高危 2.CORS漏洞概述 CORS(跨源资源共享)定义了一种机制来支持客户端跨源...
SAP的CORS启用
weixin_41149769的博客
02-26 867
SAP的CORS启用 文章目录SAP的CORS启用参考在高版本【7.52以及更高版本】配置1. 配置允许CORS参数2. 开启CORS开启白名单场景开启CORS的 ***「 活动检查 」*** 模式规则配置前端调用CORS代码其他辅助补充查看连接请求一次ajax请求，产生两次请求的原因在低于 7.52 版的 SAP NetWeaver 上启用 CORS先决条件背景信息过程1. 在 ABAP 服务器...
CORS（跨站资源共享）介绍
测试
12-03 538
起因 有同学在nginx站点配置中加了一行Access-Control-Allow-Origin *,导致微信中业务数据异常，抓包看http头有两个Access-Control-Allow-Origin字段，一个是站点自己的域名，一个是*。 为了实现跨域资源访问，在代码和nginx配置中都加了Access-Control-Allow-Origin字段，但是浏览器有个原则，如果有两个Acc...
RTK基准站的启动——利用CORS网络获取基站启动坐标
Jiker Wang
12-20 2万+
RTK基准站的启动——利用CORS网络获取基站启动坐标
全球CORS网 部分站点数据下载链接
杨家乐的博客
07-26 5527
全球范围内的主要CORS网 数据公开获取地址： 香港SatRef 系统的18个连续运行参考站 (CORS)介绍 https://www.geodetic.gov.hk/sc/satref/18cors.htm 可选xinex2或rinex3数据下载 ftp://ftp.geodetic.gov.hk/ SOPAC的网站2200多个站 ftp://garner.ucsd.edu/archive/garner/rinex NGS网址2210多个站 ...
你可能不知道的CORS跨域资源共享
10-17
CORS（跨域资源共享）是Web开发中解决跨域访问问题的一种机制，它允许浏览器在遵循同源策略的前提下，通过特定的HTTP头部与服务器通信，从而实现不同源之间的资源访问。这种机制是为了解决现代Web应用中由于同源策略...
跨域资源共享 CORS 详解
09-02
跨域资源共享（CORS，Cross-Origin Resource Sharing）是一种机制，旨在允许Web应用程序向不同源的服务器请求数据，而不会受到浏览器的同源策略限制。这一功能对于现代Web应用的开发至关重要，因为它允许开发者构建...
JavaScript：CORS（跨源资源共享）
山水子农
06-07 2773
XHR的一个主要约束是同源策略，即：相同域、相同端口、相同协议，可以通过跨域资源共享CORS(Cross-Origin Resourse Sharing)实现跨域资源共享。其基本思想是通过自定义HTTP头让浏览器与服务器沟通，从而决定请求或响应是应该成功还是失败。发送get/post请求时，给它添加一个额外的Origin头部，其中包含请求页面的源信息（协议，域名和端口），以便服务器根据这个头部信息
cors站点数据
03-14
cors站数据用于论文的写作和用处，了解一些可靠地信息。
使用fetch轻松解决JS跨域请求问题——无需CORS,jsonp
热门推荐
sunk的专栏
04-15 6万+
fetch(url, {         method: "POST",   mode: "no-cors",   headers: {     "Content-Type": "application/x-www-form-urlencoded"   },   body: "请求参数"         }).then(function(res) {  console.log("R
CORS跨域资源共享你该知道的事儿
大转转FE
08-25 289
“唠嗑之前，一些客套话”CORS跨域资源共享，这个话题大家一定不陌生了，吃久了大转转公众号的深度技术好文，也该吃点儿小米粥溜溜胃里的缝儿了，今天咱们就再好好屡屡CORS跨...
微信授权，CORS跨域问题
小男孩tom的博客
08-26 1887
问题描述： Access to XMLHttpRequest at ‘https://open.weixin.qq.com/connect/oauth2/authorize?appid=&redirect_uri=http%3A%2F%2Fbeta.nft.ping99.com%2Fapi%2Fv1%2Fwechat%2Fauth%2Fcallback&response_type=code&scope=snsapi_base&state=#wechat_redirect’ (
国内外IGS数据及产品下载网站
u011322358的博客
03-12 1万+
IGS数据及产品下载网站 本文是转载博客地址：https://blog.csdn.net/SmartTiger_CSL/article/details 一、转自http://geodesy.blog.sohu.com/274775667.html IGS下设8个分析中心，提供超快速（Ultra-rapidly）、快速（Rapid ）和最终（Final）卫星轨道、钟差等产品（Product ），以满...
CORS跨源资源共享
南舟
10-29 1203
通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略。默认情况下，XHR对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是，实现合理的跨域请求对于开发某些浏览器应用程序也是至关重要的。 CORS是W3C的一个工作草案，定义了在必须访问跨源资源时，浏览器与服务器应该如何沟通。CORS的实现原理，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从
cmd安装与启动ElasticSearch及其head插件，并解决CORS的问题
0117
10-24 2931
安装ElasticSearch 首先我们也需要去官网获取我们所需要的安装包的地址，这里选择的安装包的版本是5.6.8，大家也可以来这里下载 windows就用zip，linux就用tar.gz就行了。 下载之后解压缩 启动es服务开始 先来到解压缩的那个文件夹，然后使用elasticsearch命令就启动了，默认是9200端口 这时候我们发现这并不是一个web页面，而是一串...
SpringBoot2.0之CORS跨域配置并保持登录
06-18 700
原文链接：https://www.jianshu.com/p/e102fd47150b 本文主要记录了如何使用SpringBoot2.0配置CORS实现跨域，来解决前(Vue)后(SpringBoot)分离中带来的跨域问题。并实现Session登录后允许携带Cookie来保持登录的状态。 ** 主要内容： ** 1.问题描述 2.配置跨域 3.允许携带Cookies 4.完整配置 1.问题描...
cors跨域资源共享漏洞检测
最新发布
05-17
CORS（跨来源资源共享）是一种机制，它允许网页应用程序访问不同源的服务器资源。CORS漏洞可能会导致恶意攻击者能够从一个网站获取敏感数据或执行操作，而不需要通过身份验证。 CORS漏洞检测的一般方法是发送不同类型的请求（例如GET，POST等）并检查响应头中的Access-Control-Allow-Origin标头。如果该标头允许任何来源的请求，则存在CORS漏洞。 以下是一些常见的CORS漏洞检测工具： 1. CORS Scanner：这是一个开源的工具，用于检测基于Web的应用程序中的CORS漏洞。 2. Burp Suite：Burp Suite是一种流行的Web应用程序渗透测试工具，它包括一个CORS检测功能。 3. Nmap：Nmap是一种网络发现和安全审计工具，它可以检测CORS漏洞。 4. OWASP ZAP：ZAP是一种免费的Web应用程序安全测试工具，它可以检测CORS漏洞。 在进行CORS漏洞检测时，建议使用多种不同的工具和技术，以确保发现所有可能存在的漏洞。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值