常见跨域错误提示

from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

关注公众号“轻松学编程”学到更多。

使用jsonp处理get请求跨域问题

前端ajax:

$.ajax({
         url: '请求路由',
          type: 'GET',
          dataType: 'JSONP',
          data:{
            code: 'yes',
          },
          jsonp: 'callback',
          success: function(res) {
             var selectData = $.parseJSON(res);
             alert(selectData);
          },
          error: function(err) {

          }
      })

后端views.py

def get(self, request, *args, **kwargs):
        code = request.GET.get('code', '')
        # 跨域请求
        callback = request.GET.get('callback', '')
        return HttpResponse("%s('%s')" % (callback, json.dumps({'code': code})), status=status.HTTP_200_OK)

cors库解决get、post请求跨域问题

导包

pip install django-cors-headers

settings.py设置

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware', # 添加跨域中间件，需注意顺序
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    ...
]

# 处理跨域
CORS_ALLOW_CREDENTIALS = True  # 指明在跨域访问中，后端是否支持对cookie的操作。
#跨域增加忽略
CORS_ORIGIN_ALLOW_ALL = True  # 允许所有跨域请求
# 添加白名单
# CORS_ORIGIN_WHITELIST = (
#     # 'http://*.*.*:*',  # 允许所有http跨域
#     # 'https://*.*.*:*',  # 允许所有https跨域
#     'http://127.0.0.1:8000',  
# )

# 跨域允许的操作
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)
# 跨域允许的请求头
CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)

这样操作后跨域问题就解决了

其它

在views.py如果想添加一些受保护的请求，可以这样操作：

from django.views.decorators.csrf import csrf_exempt, csrf_protect
from django.shortcuts import render


@csrf_exempt  # 该请求不受保护
def login(request):
    return render(request, "login.html")


@csrf_protect  # 该请求受到保护
def get(request, *args, **kwargs):
    user = request.session.get("has_login", None)
    if user:
        return render(request, "welcome.html", {"user": user})
    return render(request, "login.html")

后记

【后记】为了让大家能够轻松学编程，我创建了一个公众号【轻松学编程】，里面有让你快速学会编程的文章，当然也有一些干货提高你的编程水平，也有一些编程项目适合做一些课程设计等课题。



公众号