Django解决跨域问题的两种方案：JSONP与CORS

南乔

发布时间：2026-10-13 | 4人浏览过

原创

本文介绍Django中解决跨域请求的两种主流方式：JSONP与CORS。JSONP通过动态创建script标签实现GET请求，需后端配合返回回调函数；CORS则通过在响应头中添加Access-Control-Allow-Origin字段实现更灵活的跨域控制。文章提供具体代码示例，帮助开发者根据场景选择合适方案。

JSONP跨域原理与实现

JSONP（JSON with Padding）是一种利用HTML script标签不受同源策略限制的特性来实现跨域数据交互的技术。它主要依赖于前端动态创建script元素，并将请求地址指向后端接口，后端返回包含回调函数调用的JavaScript代码，从而完成数据传递。

指定回调函数的JSONP调用

在使用JSONP时，前端可以明确指定回调函数的名称。后端Django视图接收该回调参数，并将数据封装在该函数名中进行返回。例如，前端发起请求时指定callback参数，后端获取该参数后，构造形如'callbackName("data")'的响应内容返回给浏览器，浏览器执行该脚本即可获取数据。


# 后端
def view(request):
  callback = request.GET.get('callback')
  return HttpResponse('%s("我要上鸭王")' %(callback,));


# javascript
function submitJsonp4() {
  $.ajax({
    url: 'http://127.0.0.1:9000/xiaokai.html',
    type: 'GET', //写post 没有用 只能发get
    dataType: 'jsonp', // 伪造ajax 基于script标签的创建和删除
    jsonp: 'callback', //告诉后台这个key
    jsonpCallback: 'func' //要返回这个函数名 ******8
  })
}
function func(arg) {
  console.log(arg);
}

不指定回调函数的JSONP机制

如果不显式指定回调函数名，jQuery等库会自动生成一个随机函数名，并通过jsonpCallback参数或默认机制传递给后端。后端需动态获取该随机函数名并包裹数据返回。此时，前端Ajax配置中的success回调并不会直接接收数据，而是由生成的随机函数执行success中定义的逻辑，或者jQuery内部处理该响应并触发success回调。


function submitJsonp4() {
  $.ajax({
    url: 'http://127.0.0.1:9000/xiaokai.html',
    type: 'GET', //写post 没有用 只能发get
    dataType: 'jsonp', // 伪造ajax 基于script标签的创建和删除
    jsonp: 'callback', //告诉后台这个key
    // 思考 这时候的函数名为一个随机的字符串
    // 响应直接 调用success 对应的方法
    // 如果自己写了jsonpCallback的值
    // 不会报错，而是把自己写再拼上随机的 同样回调success对应的方法
    success:function(data){
      console.log()
    }
  })
}

CORS跨域资源共享配置

CORS（Cross-Origin Resource Sharing）是W3C标准推荐的跨域解决方案，通过在HTTP响应头中添加特定字段来告知浏览器允许哪些源访问资源。在Django中，只需在视图返回的HttpResponse对象中设置Access-Control-Allow-Origin头即可。该头可以指定具体的域名，如'http://127.0.0.1:8006'，或使用通配符'*'允许所有域名访问（需注意安全性）。


def view(request):
  response=HttpResponse(json.dumps(info))  
  # 添加白名单 允许哪个域名可以访问
  response["Access-Control-Allow-Origin"]="http://127.0.0.1:8006"
  #response["Access-Control-Allow-Origin"]="*"
  return response


$(".get_service").click(function () {

   $.ajax({
     url:"http://127.0.0.1:8008/service/",
     success:function (data) {
       console.log(data)
     }
   })
 })

综上所述，JSONP适用于支持GET请求且兼容旧版浏览器的场景，而CORS则是现代Web开发中更通用、更安全的跨域方案，支持各种HTTP方法。开发者应根据实际需求和安全要求选择合适的实现方式。