| Django 跨域问题解决 | 您所在的位置：网站首页 › django允许跨域 › Django 跨域问题解决 |
Django 跨域问题解决
|
什么是跨域？
在前后端分离的项目中，跨域是一个必不可少的问题，也是一个很正常的问题，那么什么是跨域？ 跨域就是基于同源策略，不同IP、域名、端口都算作跨域。 同源策略是浏览器的安全策略。 同源：同源(ip地址、协议、端口都相同才是同源)，不同源就是跨域跨域：分为简单请求跨域和复杂请求跨域报错如下： Access to XMLHttpRequest at 'http://xx.xx.xx:80/api/otp/send-code' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.什么是复杂请求： （1) 请求方法是以下三种方法之一：（也就是说如果你的请求方法是什么put、delete等肯定是非简单请求） 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，也就是说，如果你发送的 application/json格式的数据，那么肯定是非简单请求，vue的axios默认的请求 体信息格式是json的，ajax默认是urlencoded的。浏览器对于这两种请求也是不一样的： * 简单请求和非简单请求的区别？ 简单请求：一次请求 非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。 * 关于“预检” - 请求方式：OPTIONS - “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息 - 如何“预检” => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过 Access-Control-Request-Method => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过 Access-Control-Request-Headers预检请求： 主要分以下几步： django项目中做如下配置： 安装插件： pip install django-cors-headers 将 corsheaders 添加到 INSTALLED_APPS 中 INSTALLED_APPS = [ 'corsheaders', ] 中间件中添加如下配置：在官网解释中，如果不添加到最前面，它无法将cors标识请求头添加到这些响应中。 MIDDLEWARE_CLASSES = [ 'corsheaders.middleware.CorsMiddleware', ..... ] 设置白名单 CORS_ORIGIN_WHITELIST = [ #只有localhost:8000才可以跨域访问 'localhost:8000' ] # CORS_ORIGIN_ALLOW_ALL = True #所有域名都可以跨域访问官网：https://pypi.org/project/django-cors-headers/ 跨域解决方法二：使用前后端不分离的方式开发。 这种情况也说不准，如果在不同的服务器也会存在跨域。 假如前端还是服务器模版语言，需要后端去渲染，整体运行部署就是一个地址，不存在跨域。 另外部署方式和跨域问题没有太大关系。 跨域解决方式三： nginx中设置4个头。 Access-Control-Allow-Origin Access-Control-Allow-Credentials Access-Control-Headers Access-Control-Allow-Methods 参考文献：跨源资源共享（CORS）：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS 同源和跨域、CSRF详解：https://blog.csdn.net/qq_39253370/article/details/105684890 Nginx跨域配置：https://blog.csdn.net/qq_35720307/article/details/89680726 |
【本文地址】
公司简介
联系我们