0、产生跨域的原因
浏览器的同源策略
什么是浏览器的同源策略?
src开发
ajax禁止
解决方法
jsonp
通过src绕过浏览器的同源策略
缺点：只发送GET请求
cors
通过设置相应头
分类
简单请求
复杂请求 options 预检
一、cors（常用简单）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>django</h2> <input type="button" name="" id="getService" value="获取python的数据"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> $("#getService").on('click', function () { // alert(123) $.ajax({ // 目标域，获取数据 url: "http://127.0.0.1:8002/service/", type: "get", success: function (data) { console.log(data) // console.log(typeof data) } }); }) </script> </body> </html>
def service(request): dic = {"name": "python"} response = HttpResponse(json.dumps(dic)) # 获取资源的ip response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000" return response
CORS中间件
https://www.cnblogs.com/wt7018/p/11531343.html
二、jsonp
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>django</h2> <input type="button" name="" id="getService" value="获取python的数据"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> $("#getService").on('click', function () { // alert(123) $.ajax({ // 目标域，获取数据 url: "http://127.0.0.1:8002/service/", type: "get", dataType: "jsonp", jsonp: "callbacks", // jsonpCallback: "abc", success: function (data) { console.log(data) // console.log(typeof data) } }); }) </script> </body> </html>
def service(request): dic = {"name": "python"} dic_str = json.dumps(dic) func = request.GET.get("callbacks") print(func) return HttpResponse("{}('{}')".format(func, dic_str))