08:cors实现跨域请求

不做大哥好多年 不做大哥好多年     2022-10-05     505

关键词:

目录:

1.1 cors跨域请求介绍     返回顶部

  1、cors是什么  

      1. 随着技术的发展,现在的浏览器可以支持主动设置从而允许跨域请求,即:跨域资源共享(CORS,Cross-Origin Resource Sharing)

      2. 其本质是设置响应头,使得浏览器允许跨域请求。

  2、简单请求必须满足的两个条件(不满足就是 复杂请求)

      1. 条件1: 请求方式:HEAD、GET、POST

      2. 条件2: 请求头信息:

          Accept
          Accept-Language
          Content-Language
          Last-Event-ID
          Content-Type 对应的值是以下三个中的任意一个
              application/x-www-form-urlencoded
              multipart/form-data
              text/plain

  3、简单请求和非简单请求的区别

      简单请求    :一次请求
      非简单请求 :两次请求,在发送数据之前会先发一次请求用于做“预检”,只有“预检”通过后才再发送一次请求用于数据传输

  4、关于“预检”

      1. 请求方式:OPTIONS
      2. “预检”其实做检查,检查如果通过则允许传输数据,检查不通过则不再发送真正想要发送的消息
      3. 如何“预检”

          1) 如果复杂请求是PUT等请求,则服务端需要设置允许某请求,否则“预检”不通过
              Access-Control-Request-Method
          2) 如果复杂请求设置了请求头,则服务端需要设置允许某请求头,否则“预检”不通过
              Access-Control-Request-Headers

1.2 使用tornado实现 复杂请求     返回顶部

  1、说明

      1. 由于复杂请求时,首先会发送“预检”请求,如果“预检”成功,则发送真实数据。

      2. “预检”请求时,允许请求方式则需服务器设置响应头:Access-Control-Request-Method
      3. “预检”请求时,允许请求头则需服务器设置响应头:Access-Control-Request-Headers
      4. “预检”缓存时间,服务器设置响应头:Access-Control-Max-Age

  2、tornado测试cors步骤

      1. 创建两个tornado项目: tom_tornado(客户端域)、jack_tornado(服务端域)

      2、修改C:WindowsSystem32driversetc 路径下的 hosts文件,添加两条hosts记录

          127.0.0.1 tom.com
          127.0.0.1 jack.com

      3、在http://tom.com:8000/get_date 的get_date.html文件通过ajax向 http://jack.com:8888/index 获取数据

      4、创建 tom_tornado项目

技术分享图片
import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.set_header(Access-Control-Allow-Origin, "")
        self.render(get_data.html)

settings = {
    template_path: template,
    static_path: static,
    static_url_prefix: /static/,
}

application = tornado.web.Application([
    (r"/get_date", MainHandler),
], **settings)

if __name__ == "__main__":
    application.listen(8000)
    print(http://tom.com:8000/get_date)
    tornado.ioloop.IOLoop.instance().start()
app.py
技术分享图片
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p>
        <input type="submit" onclick="XmlSendRequest();" />
    </p>

    <p>
        <input type="submit" onclick="JqSendRequest();" />
    </p>

    <script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
    <script>
        function XmlSendRequest(){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4) {
                    var result = xhr.responseText;
                    console.log(result);
                }
            };
            xhr.open(GET, "http://jack.com:8888/index", true);
            xhr.send();
        }

        function JqSendRequest(){
            $.ajax({
                url: "http://jack.com:8888/index",
                type: GET,
                dataType: text,
                success: function(data, statusText, xmlHttpRequest){
                    console.log(data);
                }
            })
        }
    </script>
</body>
</html>
get_data.html

      5. 创建 jack_tornado项目

技术分享图片
import tornado.ioloop
import tornado.web
import json

class IndexHandler(tornado.web.RequestHandler):
    def get(self):
        self.set_header("Access-Control-Allow-Origin", "*")
        self.set_header("Access-Control-Allow-Headers", "x-requested-with")       # 允许请求头则需服务器设置响应头
        self.set_header(Access-Control-Allow-Methods, POST, GET, OPTIONS)     # 允许请求方式则需服务器设置响应头
        # self.set_header(‘Access-Control-Max-Age‘, 10)                               # “预检”缓存时间,服务器设置响应头
        self.write({"status": true, "data": "seven"})

settings = {
    template_path: views,
    static_path: static,
    static_url_prefix: /static/,
}

application = tornado.web.Application([
    (r"/index", IndexHandler),
], **settings)

if __name__ == "__main__":
    application.listen(8888)
    print(http://jack.com:8888/index)
    tornado.ioloop.IOLoop.instance().start()
app.py

 

















springboot跨域(cors)支持:注解@crossorigin

...的资源。跨源资源共享(CORS)是由大多数浏览器实现的W3C规范,允许您灵活地指定什么样的跨域请求被授权,而不是使用一些不太安全和不太强大的策略,如IFRAME或JSONP。SpringFramework4.2GA为CORS提供了第一类支... 查看详情

angularjs实现跨域请求

跨域,前端开发中常常遇到的问题。AngularJS实现跨域方式类似于Ajax。使用CORS机制。以下阐述一下AngularJS中使用$http实现跨域请求数据。AngularJSXMLHttpRequest:$http用于读取远程server的数据$http.post(url,data,[config]).success(function(){...}... 查看详情

django实现跨域请求(代码片段)

目录JsonP实现跨域在Django中间件中添加响应头@***CORS即CrossOriginResourceSharing跨域资源共享.跨域请求分两种:简单请求、复杂请求.简单请求简单请求必须满足下述条件.HTTP方法为这三种方法之一:HEAD、GET、POST·HTTP头消息不超出以下... 查看详情

django实现全局支持跨域请求(代码片段)

Django允许跨域请求一.django实现支持跨域请求,本人所了解到的方法有两种:  1.视图中进行配置,只实现当前视图支持跨域请求  2.进行全局配置,实现所有视图均支持跨域请求这里对第二种方法进行一下说明:1.安装django-cors-header... 查看详情

跨域实现方式

同源:同协议、端口、域名(三者必须全部相同)同源策略:浏览器不允许当前页面向非同源站点发送请求(防止用户信息被恶意站点获取的基本措施)跨域请求:当前站点向某些非同源站点进行请求 跨域请求方式:一、服... 查看详情

跨域请求的方式即实现(代码片段)

...;jsonp;CORS–跨域资源共享Php服务器代理跨域请求的方式即实现浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域当发送方地址和接受放地址传输协议域名端口号有任意一个不一样... 查看详情

jsonp实现跨域请求

直接用原生ajax请求另一个域的资源,会被同源策略限制,而用<scriptsrc="url"></script>这种方式“引入url”,实际上引入了一个js代码,就不会被同源策略限制,可以请求到。用这个有一个前提就是对方网站后台的返回确实... 查看详情

springboot实现跨域请求

...模块形式,不过本质上还是将前端放在webapps下)。SpringBoot实现跨域其实和Spring是一样,区别不大,如果要说区别的话,Spring需要在对应的xml文件中配置bean,而SpringBoot则通过注解的方式。Spring配置跨域请求可参考我的这篇文章:h 查看详情

vuejsaxios实现跨域http请求接口

跨域post实例,用到了qs组件来避开ajax信使请求,并兼容Android。importaxiosfrom‘axios‘;importqsfrom‘qs‘;axios.post(‘http://www.xyz.com/request‘,qs.stringify(params)).then(response=>{console.log(response);}).catch(err=>{ 查看详情

jsonp跨域请求实现示例

 网上看了很多关于jsonp的资料,发现在本机运行后实现不了,有的是有错漏,有的是说的比较含糊,接合自己的情况,整了一个可运行的示例;前言:ajax请求地址:http://192.168.1.102:8080/carop/jsonp服务端要返回的jsonp字符串:jso... 查看详情

关于使用jq跨域请求的实现(代码片段)

今天算是把js跨域请求搞定了,想实现跨越,首先想到的是JSONP,但是具体去做的时候,发现有很多坑。在本地测试好之后又发现目标网站做了https证书认证,也就是实用的jsonp请求地址必须是https请求方式。。。无语。。继续实... 查看详情

ajax+springmvc实现跨域请求(jsonp)(转)

背景:AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取http://127.0.0.1:8080/DevInfoWeb/getJsonp上的远程资源。可以将资源移动到相同的域名上或者启用CORS来解决这个问题。百度一下,发现是遇到了跨域... 查看详情

jsonp实现跨域请求ajax

客户端#!/usr/bin/envpythonimporttornado.ioloopimporttornado.webclassMainHandler(tornado.web.RequestHandler):defget(self,*args,**kwargs):self.render(‘index.html‘)defpost(self,*args,**kwargs):self.render(‘ 查看详情

cors跨域请求规则以及在spring中的实现

...AJAX从外部获取资源,因此就衍生了CORS这一标准体系,来实现跨域请求。CORS是一个W3C标准,全称是"跨域资源共享"(Cross-originresourcesharing)。它允许浏览器向跨源(协议+域名+端口)服务器,发出XMLHttpRequest请求,从而克服了AJAX只能... 查看详情

使用cros实现跨域请求

直接上代码前端    data.xhrFields={‘Access-Control-Allow-Origin‘:‘*‘};ajax请求加上一个参数后端 this.Response.Headers.Add("Access-Control-Allow-Origin","*");响应流里添加一个headers这样浏览器就不会限制你的跨域请求了当然还可... 查看详情

jsonp_____跨域请求实现

 请求如下:$.ajax({ type:"GET", async:false, url:"http://127.0.0.1:8080/Cross-site-request/crosssite", dataType:"jsonp", data:{"value":"123"}, jsonpCallback:"callback", success:function(data){ 查看详情

ajax获取json数据及实现跨域请求

最近想练习一下ajax获取json数据,首先上网找一些在线的可用来测试的接口.-----------------------------------------------------这里是接口分割线Begin----------------------------------------------------------------------------------------------- 查看详情

jsonp实现数据跨域请求

1、我们知道,哪怕跨域js文件中的代码(当然指符合web脚本安全策略的),web页面也是可以无条件执行的。远程服务器remoteserver.com根目录下有个remote.js文件代码如下: alert(‘我是远程文件‘);本地服务器localserver.com下有个jso... 查看详情