怎么处理Django+vue跨域问题-创新互联

小编给大家分享一下怎么处理Django+vue跨域问题,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

浑南ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!

跨域

由于开发模式为前后端分离式开发,故而通常情况下,前端和后端可能运行不同的ip或者port下,导致出现跨域问题,故而单独说明

什么是跨域

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。
其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。

什么是同源策略?

同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等***。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

同源策略限制以下几种行为:

  1. Cookie、LocalStorage 和 IndexDB 无法读取

  2. DOM 和 Js对象无法获得

  3. AJAX 请求不能发送

跨域错误浏览器会在控制台中出现如下错误:
报错信息如下:

Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/test/' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

翻译过来即是:从源地址 http://127.0.0.1:3000 发起的到http://127.0.0.1:8000/api/test/ 的XMLHttpRequest访问违反了同源策略:因为在请求头中没有Access-Control-Allow-Origin的值

前端解决跨域

参考博客

既然跨域是因为不同源,那我同源不就完事儿了,但是后端请求地址不可能改变,所以可以在前端和后端的中间加一层代理,前端通过代理访问后端。
在Vue-cli工具中已经提供了代理的功能,只需要配置即可。
在根目录下的config/index.js文件中有如下配置项:

proxyTable: {      
    '/': { 
        target: 'http://127.0.0.1:8000/',        
        changeOrigin: true,        
        pathRewrite: {          
            '^/api': ''
        }
      }
    },
  • '/'表示以'/'(即所有的路径)开头的路径均需要代理,

  • target:代理的目标服务器地址(即后端服务器地址)为 'http://127.0.0.1:8000/',

  • changeOrigin,为修改源:修改请求中的源地址

  • pathReWrite:URL路径重写,对于以'/api'开头的路径将'/api'替换为''

后端解决跨域

后端出于安全考虑,也会对于跨域有限制,解决方法如下:

安装django-cors-headers

$ pip install django-cors-headers

配置settings.py文件

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

MIDDLEWARE = (
    ...    
    'corsheaders.middleware.CorsMiddleware',    
    'django.middleware.common.CommonMiddleware', # 注意顺序
    ...
)

#跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True

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',
)

看完了这篇文章,相信你对“怎么处理Django+vue跨域问题”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联-成都网站建设公司行业资讯频道,感谢各位的阅读!


网页标题:怎么处理Django+vue跨域问题-创新互联
网站地址:http://bzwzjz.com/article/cchgco.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站建设 成都网站建设 重庆外贸网站建设 重庆企业网站建设 成都做网站建设公司 网站建设公司 温江网站设计 网站建设公司 自适应网站设计 网站建设推广 高端网站设计 成都网站建设公司 成都网站建设 成都网站制作 网站建设方案 重庆手机网站建设 成都企业网站制作 定制网站制作 成都商城网站建设 手机网站制作 营销网站建设 重庆网站建设