JavaScript实现跨域请求

最新推荐文章于 2024-08-22 11:40:28 发布

Abraverman

最新推荐文章于 2024-08-22 11:40:28 发布

阅读量3.4k

点赞数 1

分类专栏： Python自学

本文链接：https://blog.csdn.net/qq_42874244/article/details/85201200

版权

Python自学专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、什么叫跨域请求

简单来说就是一个域通过某种方式请求到另一个域的数据，比如说百度请求京东的数据！这种方式适合有合作的两个公司！方法有以下几种！

二、具体方法jsonp、cors

问题
现在我需要请求到以下数据，这是一个django域名为“127.0.0.1:8001”的工程，我现在从django域名为“127.0.0.1:8006”的工程中的index.html的页面中提取这个数据

为了方便我直接将被请求的一方URL和函数写在一起

# url = http://127.0.0.1:8001/
from django.shortcuts import render,HttpResponse
import json
def myserver(request):
    info={"name":"yueyue","age":18,"price": 200}
    print("到了！")
    return HttpResponse(json.dumps(info))

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^myserver/', myserver),
]

请求方也做了同样的处理，请求方通过网页为客户端请求8001的数据

# url = http://127.0.0.1:8002/
def myserver(request):
    render(request, "kuayu.html")


urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^myserver/', myserver),
]

1、方法一、cors方法

第一种方法是通过操作后端来实现：
我们直接用ajax请求浏览器：

# 被请求体后端胆码
# 方法一：cors
def myserver(request):
    info={"name":"yueyue","age":18,"price": 200}
    response = HttpResponse(json.dumps(info))
    response["Access-Control-Allow-Origin"]="http://127.0.0.1:8002"  # 相当于怎加了白名单
    return response

# 请求端网页代码

<h3>QINGQIU</h3>
<input type="button" value="请求" id="My_but">

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $("#My_but").click(function () {
        $.ajax({
            url:"http://127.0.0.1:8001/myserver/",
            success:function (data) {
                console.log(data)
            }
        })
    })
</script>

点击按钮
在这里插入图片描述

会出错，但是服务端收到了请求!这个错误的意思是返回头缺少东西，然后我们改一下被请求端：

# 给请求头加了一些东西，成功了！
def myserver(request):
    info={"name":"yueyue","age":18,"price": 200}
    response = HttpResponse(json.dumps(info))
    response["Access-Control-Allow-Origin"]="http://127.0.0.1:8002"  # 相当于怎加了白名单
    return response

在这里插入图片描述

2、方法二：jsonp（伪ajax请求）

这个方法来修改客户端的请求也就是浏览器的请求，代码如下

# 被请求端后端代码
# 方法二：jsonp
def myserver(request):
    func = request.GET.get("callbacks")
    print("func", func)
    info={"name":"yueyue","age":18,"price": 200}
    return HttpResponse(" %s('%s')" % (func, json.dumps(info)))

下面是请求端前端代码：

<h3>QINGQIU</h3>
<input type="button" value="请求" id="My_but">

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $("#My_but").click(function () {
        $.ajax({
             url:"http://127.0.0.1:8001/myserver/",
             type:"get",
             dataType:"jsonp",     // 伪造ajax  基于script
             jsonp: 'callbacks',
             //jsonpCallback:"alex",
             success:function (data) {
                 console.log(data)
             }
         })
    })
</script>

运行之后，如下：

在这里插入图片描述

补充：关于前端数据处理

对请求到的数据，关于标签的增删改查新方法：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域请求</title>
</head>
<body>
<h3>QINGQIU</h3>
<input type="button" value="请求" id="My_but">

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    // 应用
    $("#My_but").click(function () {
        $.ajax({
            url: "http://www.jxntv.cn/data/jmd-jxtv2.html",
            type: "get",
            dataType: "jsonp",     // 伪造ajax  基于script
            jsonp: 'callbacks',
            jsonpCallback: "list",
            success: function (data) {
                //console.log(data.data);

                var html = "";
                $.each(data.data, function (index, weekday) {
                    console.log(weekday); // {week: "周一", list: Array(19)}

                    html += '<p>' + weekday.week + '</p>';

                    $.each(weekday.list, function (j, show) {
                        html += '<p><a href=' + show.link + '>' + show.name + '</a></p>'
                    })
                });
                $("body").append(html)
            }
        })
    })
</script>