CORS实现跨域Ajax

客户端

#!/usr/bin/env python
import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self, *args, **kwargs):
        self.render(‘index.html‘)
    def post(self, *args, **kwargs):
        self.render(‘index.html‘)

class CorsHandler(tornado.web.RequestHandler):
    def get(self, *args, **kwargs):
        self.render(‘index.html‘)
    def post(self, *args, **kwargs):
        self.render(‘index.html‘)
settings ={
    ‘template_path‘:‘views‘,#html文件模板路径配置
    ‘static_path‘:‘statics‘,#css,js文件路径配置
    ‘static_url_prefix‘:‘/sss/‘,
}
application = tornado.web.Application([
        (r"/index", MainHandler),
    (r"/cors", CorsHandler),
        ],**settings)
if __name__ == "__main__":
    application.listen(8000)
    tornado.ioloop.IOLoop.instance().start()

app.py

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <input type="button" value="Jsonp" onclick="JsonpAjax();">
    <input type="button" value="DOJsonp" onclick="DoJsonpAjax();">
    <script src="{{static_url(‘jquery-3.1.1.js‘)}}"></script>
    <script>
/
         function DoJsonpAjax() {
            $.ajax({
            url:‘http://tao.com:8001/cors‘,
            type:‘POST‘,
            data:{‘k1‘:‘v1‘},
            success:function (arg) {
                console.log(arg)
            }
        })
        }
        function JsonpAjax() {
            $.ajax({
            url:‘http://tao.com:8001/cors‘,
            type:‘PUT‘,
            headers:{‘h1‘:‘HH1‘},
            data:{‘k1‘:‘v1‘},
            xhrFields:{withCredentials:true},
            success:function (arg) {
                console.log(arg)
            }
        })
        }
//        function DoJsonpAjax() {
////            var tag = document.createElement(‘script‘);
////            tag.src = "http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list";
////            document.head.appendChild(tag);
////
////            document.head.removeChild(tag);
//////
//            $.ajax({
//                url: "http://tao.com:8001/index",
//                type:"POST",
//                dataType: ‘jsonp‘,
//                jsonp:‘callback‘,//相当于在url: "http://tao.com:8001/index?callback= xxoo",
//                jsonpCallback: "xxoo"//相当于在url: "http://tao.com:8001/index?callback= xxoo",
//            })
//        }
    </script>
</body>
</html>

index.html

服务端

#!/usr/bin/env python
import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self, *args, **kwargs):
        callback = self.get_argument(‘callback‘)
        self.write("{}([11,22,33])".format(callback))
    def post(self, *args, **kwargs):
        self.write(‘t2.post‘)
class CorsHandler(tornado.web.RequestHandler):
    def get(self, *args, **kwargs):
        self.write(‘index.get‘)
    def post(self, *args, **kwargs):
        self.set_header("Access-Control-Allow-Origin","http://taochen.com:8000")
        self.write(‘index.post‘)
    def options(self, *args, **kwargs):
        self.set_header("Access-Control-Allow-Origin", "http://taochen.com:8000")
        self.set_header("Access-Control-Allow-Methods", "PUT,DELETE")
        self.set_header("Access-Control-Allow-Headers", "h1")
        self.set_header("Access-Control-Allow-Credentials",‘true‘)
    def put(self, *args, **kwargs):
        print(self.cookies)
        self.set_cookie(‘kk‘,‘kkk2‘)
        self.set_header("Access-Control-Allow-Origin", "http://taochen.com:8000")
        self.set_header("Access-Control-Allow-Credentials", ‘true‘)
        self.write("ok")
settings ={
    ‘template_path‘:‘views‘,#html文件模板路径配置
    ‘static_path‘:‘statics‘,#css,js文件路径配置
    ‘static_url_prefix‘:‘/sss/‘,
}
application = tornado.web.Application([
        (r"/index", MainHandler),
    (r"/cors", CorsHandler),
        ],**settings)
if __name__ == "__main__":
    application.listen(8001)
    tornado.ioloop.IOLoop.instance().start()

app.py

时间: 2024-10-11 05:40:03

CORS实现跨域Ajax的相关文章

HTML5安全:CORS(跨域资源共享)简介

前言:像CORS对于现代前端这么重要的技术在国内基本上居然很少有人使用和提及,在百度或者Google上搜索CORS,搜到的中文文章基本都是另外一种卫星定位技术CORS的介绍,让我等前端同学情何以堪(对比起来,用Google搜到的国外文章,基本都是跨域资源共享的介绍,说明了前端技术在国内外环境和发展的巨大差距). 我之前<用HTML5实现人脸识别>这篇文章中提到了“Face.com实现了CORS(跨域资源共享).CORS系统基本上可以让服务器暴露给其它域上文件的Ajax调用.这是一个伟大的功能,

Angular通过CORS实现跨域方案

以前有一篇很老的文章网上转了很多,包括现在如果你百度"跨域"这个关键字,前几个推荐的都是"Javascript跨域总结与解决方案".看了一下感觉手段有点陈旧了,有一些比如document.domain还有iframe的解决方案委实"丑陋"一些,感觉不再适用于现在一些项目中. 就拿iframe来说作为一个前端工程师,我极为讨厌iframe这种东西.它不光增加了性能上的高负荷,同时也不利于掌控. 在Angular应用中实现跨域的方式相对简单,基本上通

CORS(跨域资源共享)简介

前言:像CORS对于现代前端这么重要的技术在国内基本上居然很少有人使用和提及,在百度或者Google上搜索CORS,搜到的中文文章基本都是另外一种卫星定位技术CORS的介绍,让我等前端同学情何以堪(对比起来,用Google搜到的国外文章,基本都是跨域资源共享的介绍,说明了前端技术在国内外环境和发展的巨大差距). 我之前<用HTML5实现人脸识别>这篇文章中提到了"Face.com实现了CORS(跨域资源共享).CORS系统基本上可以让服务器暴露给其它域上文件的Ajax调用.这是一个伟

HTML5安全:CORS(跨域资源共享)简介(转)

前言:像CORS对于现代前端这么重要的技术在国内基本上居然很少有人使用和提及,在百度或者Google上搜索CORS,搜到的中文文章基本都是另外一种卫星定位技术CORS的介绍,让我等前端同学情何以堪(对比起来,用Google搜到的国外文章,基本都是跨域资源共享的介绍,说明了前端技术在国内外环境和发展的巨大差距). 我之前<用HTML5实现人脸识别>这篇文章中提到了“Face.com实现了CORS(跨域资源共享).CORS系统基本上可以让服务器暴露给其它域上文件的Ajax调用.这是一个伟大的功能,

为什么我的跨域 AJAX 发了两个请求?

为什么我的跨域 AJAX 发了两个请求? 转载自:http://todoit.me/ajax-preflight/ 最近在做一个 VUE 的项目的时候, 和后端的小伙伴对接口, 想方便开发, 于是要求后端的小伙伴在所有的接口都加上跨域的许可 (Access-Control-Allow-Origin) (后来事实证明这不是一个很好的解决方案, 因为 vue-cli 提供了 proxy-table 作为 AJAX请求的代理, 只需要配置一下就好, 编译上线也不要改动代码) however, 经过这次

JAVA用CORS实现跨域请求

之前在开发实验室的一个云服务,主要后端是使用java基于jfinal框架.我们在开发中遇到了一个小小的问题,由于我们开发通常是将前后端分离利用AJAX进行交互的.但是AJAX是不允许跨域的哦,那么问题来了,我们该如何进行跨域AJAX呢? 一.什么是AJAX? Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用 

HTML5安全:CORS(跨域资源共享)简介。。。ie67不要想了。。。

来源:http://blog.csdn.net/hfahe/article/details/7730944 前言:像CORS对于现代前端这么重要的技术在国内基本上居然很少有人使用和提及,在百度或者Google上搜索CORS,搜到的中文文章基本都是另外一种卫星定位技术CORS的介绍,让我等前端同学情何以堪(对比起来,用Google搜到的国外文章,基本都是跨域资源共享的介绍,说明了前端技术在国内外环境和发展的巨大差距). 我之前<用HTML5实现人脸识别>这篇文章中提到了“Face.com实现了C

TML5安全:CORS(跨域资源共享)简介

来源:http://blog.csdn.net/hfahe/article/details/7730944 前言:像CORS对于现代前端这么重要的技术在国内基本上居然很少有人使用和提及,在百度或者Google上搜索CORS,搜到的中文文章基本都是另外一种卫星定位技术CORS的介绍,让我等前端同学情何以堪(对比起来,用Google搜到的国外文章,基本都是跨域资源共享的介绍,说明了前端技术在国内外环境和发展的巨大差距). 我之前<用HTML5实现人脸识别>这篇文章中提到了“Face.com实现了C

跨域AJAX请求

在处理跨域AJAX请求有许多方法.我这里用的是 CORS, CORSFilter CORSFilter是Apache官方提供一个支持CORS跨域的过滤器: 详细说明: http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html 在maven配置文件中导入依赖 <!--CORS--> <dependency> <groupId>com.thetransactioncompany</groupId> &l