发布时间：2025-12-10 19:28:12 浏览次数：5
浏览器的跨域解决方案有哪些_浏览器跨域问题怎么解决一.jsonp解决跨域问题1.函数中传参dom1中的HTMLdemo2中的视图函数:JQuery中getJSON方法:demo2中HTML要注意的是在url的后面必须要有一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个
一. jsonp解决跨域问题
1. 函数中传参
dom1中的HTML
<!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>xyz</title></head><body><button >点我</button><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script> function rion(res) { console.log(res); }</script><script src="http://127.0.0.1:8002/abc/"></script></body></html>【正版授权，激活自己账号】：Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
demo2 中的视图函数:
def abc(request): res = {"code": 0, "data": ["SNIS-561", "SNIS-517", "SNIS-539"]} return HttpResponse("rion({})".format(json.dumps(res)))JQuery中getJSON方法:
demo2中HTML
<!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>xyz</title></head><body><button >点我</button><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script> $("#b1").click(function () { $.getJSON("http://127.0.0.1:8002/abc/?callback=?", function (res) { console.log(res); }) });</script></body></html>
要注意的是在url的后面必须要有一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个？是jQuery内部自动生成的一个回调函数名。
二. CORS解决跨域问题
CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器发出XMLHttpRequest请求，从而解决AJAX只能同源使用的限制.
浏览器将CORS请求分为两类: 简单请求和非简单请求
一个请求需要同时满足 以下两大条件 才属于简单请求.
（1) 请求方法是以下三种方法之一： HEAD GET POST（2）HTTP的头信息不超出以下几种字段： Accept Accept-Language Content-Language Last-Event-ID Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
简单请求的处理方式
在跨域场景下，当浏览器发送简单请求时，浏览器会自动在请求头中添加表明请求来源的 Origin 字段。
我们的后端程序只需要在返回的响应头中加上Access-Control-Allow-Origin 字段，并且把该字段的值设置为 跨域请求的来源地址或简单的设置为 * 就可以了。
例如：我们可以在Django中间件中的process_response方法来给相应对象添加该字段。
from django.utils.deprecation import MiddlewareMixinclass CorsMiddleware(MiddlewareMixin): def process_response(self, request, response): # 给响应头加上 Access-Control-Allow-Origin 字段 并简单的设置为 * response['Access-Control-Allow-Origin'] = '*' return response
非简单请求的处理方式 >>
我们开发中常用到的那些请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json的都是非简单请求。
对于非简单请求，浏览器通常都会在请求之前发送一次 OPTIONS 预检 请求。该请求会像后端服务询问是否允许从当前源发送请求并且询问允许的请求方法和请求头字段。
解决方案在上面Django的中间件中添加如下代码：
from django.utils.deprecation import MiddlewareMixinclass CorsMiddleware(MiddlewareMixin): def process_response(self, request, response): # 给响应头加上 Access-Control-Allow-Origin 字段 并简单的设置为 * response['Access-Control-Allow-Origin'] = '*' if request.method == 'OPTIONS': # 允许发送 PUT 请求 response['Access-Control-Allow-Methods'] = 'PUT, DELETE' # 允许在请求头中携带 Content-type字段，从而支持发送json数据 response['Access-Control-Allow-Headers'] = 'Content-type' return response
三. 使用 Django-corset-headers 解决跨域问题
我们这个中间件确实能解决目前的CORS跨域问题，但是我们的土方法肯定是不够严谨的，已经有人造好轮子– django-cors-headers 了。
我们只需要安装这个包，然后按需要配置一下就可以了。
安装
pip install django-cors-headers
注册APP
INSTALLED_APPS = [ ... 'app01.apps.App01Config', 'corsheaders', # 将 corsheaders 这个APP注册]
添加中间件
必须放在最前面，因为要先解决跨域的问题。只有允许跨域请求，后续的中间件才会正常执行。
MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', # 添加中间件 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', # 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware',]
配置
你可以选择不限制跨域访问
CORS_ORIGIN_ALLOW_ALL = True
或者你可以选择设置允许访问的白名单
CORS_ORIGIN_ALLOW_ALL = FalseCORS_ORIGIN_WHITELIST = ( # '<YOUR_DOMAIN>[:PORT]', '127.0.0.1:8080')
更多详细配置详细请查看django-cors-headers项目
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流