跨域请求的两种实现方式

Jsonp

域1

index.html

<script>
        $(".get-service").click(function () {
            $.ajax({
                url: "http://127.0.0.1:8005/service/",
                type: "get",
                dataType: "jsonp",
                jsonp: "callbacks",         // 伪造ajax, 基于script
                // jsonpCallback: "alex",   // 不写的话,默认是随机字符串
                success: function (data) {
                    console.log("//", data, typeof data);
                    data = JSON.parse(data);
                    console.log("//", data, typeof data);
                }
            })
        });
</script>

域2

被请求的域

views.py

def service(request):           # jsonp
    data = {"name": "sun", "age": 28}
    import json
    data = json.dumps(data)     # 序列化
    func = request.GET.get("callbacks")
    return HttpResponse("%s(‘%s‘)" % (func, data))

cors

域1

index.html

<script>
    $(".get-service").click(function () {
        $.ajax({
            url: "http://127.0.0.1:8005/service/",
            data: {},
            success: function (data) {
                console.log(data);
                data = JSON.parse(data);
                console.log(data);
            }
        });

    });
</script>

域2

被请求的域

views.py

def service(request):           # cors版本
    data = {"name": "sun", "age": 28}
    import json
    data = json.dumps(data)     # 序列化
    response = HttpResponse(data)
    response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8004"    # 写*的话代码所有的ip地址都可以向本域跨域
    return response

原文地址:https://www.cnblogs.com/sunch/p/9866102.html

时间: 2024-08-10 13:05:53

跨域请求的两种实现方式的相关文章

ASP.NET MVC 实现AJAX跨域请求的两种方法

通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框架里实现跨域的AJAX请求有几种方式可以实现,以下就介绍常用的两种方法. 1.     发送JSONP请求 客户端: JQuery对发送JSONP请求有很好的支持,客户端通过. ajax() 函数发送请求,其中需要制定 dataType 为“jsonp”  jsonpCallback 为指定的回调函

关于跨域请求的两种方案

cors方式 之前在chrome控制台看到金蝉同一个请求有的时候会发送两个(多出一个OPTION的情况)的情况,有点奇怪,经过一顿研究发现原来这个是 CORS 实现跨域 非简单请求 的处理方式.具体内容参见阮大神的文档跨域资源共享 CORS 详解. jsonp方式 原理 利用<script>标签src不受同源策略限制. 缺点 <script>请求的内容会直接执行,那么这就要求接口返回的东西是浏览器可执行的,目前的实现方式都是把结果包装成callback(reslut)这种模式,但是

ASP.NET MVC 实现跨域请求的两种形式

一.使用jsonp请求 1 $.ajax({ 2 type: "GET", 3 url: "http://10.174.1.1/Home/Test?callback=?", 4 data: { id: "1" }, 5 dataType: "jsonp", 6 jsonp: "callback", 7 success: function (data) { 8 alert(data); 9 }, 10 err

System.Web.Http.Cors配置跨域访问的两种方式

System.Web.Http.Cors配置跨域访问的两种方式 使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心得.在webapi中使用System.Web.Http.Cors配置跨域信息可以有两种方式.  一种是在App_Start.WebApiConfig.cs的Register中配置如下代码,这种方式将在所有的webapi Controller里面起作用. using System; using Sys

解决vue axios跨域请求发送两次问题

问题: vue axios跨域请求,在Request Headers加Authorization传递Token时,发现统一请求触发了两次,第一次是Request Method: OPTIONS请求. 原因: 跨域请求时,浏览器会首先使用OPTIONS方法发起一个预请求,判断接口是否能够正常通讯.如果通讯异常,则不会发送真正的请求,如果测试通讯正常,则开始真正的请求. 解决方法: 后台:判断请求方式是OPTIONS,则不处理: 预请求 发送真正请求  PHP解决方法 class Common ex

跨域请求的3种方式

视频教程 跨域请求的方式:3种 1.后台代理 2.jsonp 3.HTML5中的XHR2 需要前端会的方法是后两种. 2.jsonp使用方法:只支持get方式 $.ajax({dataType:"jsonp",jsonp:"callback",success:...,error:...});//前台,修改数据类型,定义jsonp属性和参数名,等待后台调用 var request=$_GET("callback");//后台,接收前台定义好的参数名

解决前端跨域请求的几种方式

利用 JSONP 实现跨域调用 说道跨域调用,可能大家首先想到的或者听说过的就是 JSONP 了. 1.1 什么是JSONP JSONP 是 JSON 的一种使用模式,可以解决主流浏览器的跨域数据访问问题.其原理是根据 XmlHttpRequest 对象受到同源策略的影响,而 <script> 标签元素却不受同源策略影响,可以加载跨域服务器上的脚本,网页可以从其他来源动态产生 JSON 资料.用 JSONP 获取的不是 JSON 数据,而是可以直接运行的 JavaScript 语句. 1.2

项目中经常遇到的跨域请求的几种方法

什么是跨域 JSONP proxy代理 cors xdr 关于跨域无非就是jsonp和iframe,随着跨域请求的应用越来越多,W3C提供了跨域请求的标准方案(Cross-Origin Resource Sharing).IE8.Firefox 3.5 及其以后的版本.Chrome浏览器.Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范,实现了跨域请求.在服务器响应客户端的时候,带上Access-Control-Allow-Origin头信息. 如

实现跨域请求的4种方法

模拟服务器端的PHP文件: service: <?php//允许访问header('Access-Control-Allow-Origin:*');@$callback=$_GET['callback'];//创建数据$userInfo = array('id'=>1,'username'=>'Scott Jeremy','email'=>'[email protected]');//编译成JSON$result = json_encode($userInfo);echo $cal