一、原理

同源?同源策略?

的定义是:两个页面的协议、端口和域名都相同

同源的例子:

不同源的例子:

同源策略SOP(Same origin policy)是一种浏览器约定,它是浏览器最核心也最基本的安全功能,为了防止浏览器受到XSS、CSFR的攻击,浏览器采用了同源策略,用于限制一个源加载的文档或脚本与另一个源的交互。

在我们的项目中,前端的vue和后端的django分别使用不同的端口,因此受到同源策略的限制,在没有跨域配置的初期,无法进行正常通信。

跨域?什么域?

跨域顾名思义就是一个网域向另一个网域发起资源交互,比如我们的前端http://localhost:9528与后端http://127.0.0.1:8000由于端口号的不同,处在不同的网域(源),因此进行api请求获取资源自然就是违反同源策略的跨域操作。

后端端口:

前端端口:

二、使用CORS解决跨域问题

跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 源 (网域) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求

Django CORS

1)安装django-cors-headers模块

pip install django-cors-headers

2) 在settings.py中配置

  • 添加应用
INSTALLED_APPS = [
...
'corsheaders',
...
]
  • 添加中间件
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]
  • 添加白名单并允许访问白名单
CORS_ORIGIN_WHITELIST = (
'http://127.0.0.1:8000',
'http://localhost:9528', #凡是出现在白名单中的域名,都可以访问后端接口
) CORS_ALLOW_CREDENTIALS = True # 允许携带cookie

Vue Proxy

vue.config.js中配置proxy代理

devServer: {
...
proxy: {
'^/api': {
target: 'http://127.0.0.1:8000',
changeOrigin: true, // 允许跨域
pathRewriter: {
'^/api' : ''
}
}
},
...
},

其中,^/api表示以"/api"开头的url将会代理到target对应的网域中,pathRewriter表示将url中的"/api"改写为"",也就是删去。

三、踩坑/经验

  1. 在vue.config.js里配置proxy,并修改请求的url后仍无法连接到后端

    • 解决:

      • url最后忘了'/',导致和后端不匹配,会有404、500等错误
      • 后端服务未打开或出现其他错误,也会报code为500的错
      • api中添加request,记得修改urlbaseURL(比如我们使用vue-element-admin,默认是/dev-api,改成空),否则在请求的url中间会多一个/dev-api,取不到数据
      • proxy中的拼写错误也会导致无法处理跨域,比如"pathRewriter"写成"pathRewrite"
  2. 在后来实验中,发现Django的CORS和Vue的proxy只需配置其一,就能实现跨域资源共享

四、参考

Django+Vue跨域配置与经验的更多相关文章

  1. django 的跨域配置

    1.跨域原理 #1. 首先浏览器安全策略限制js ajax跨域访问服务器 #2. 如果服务器返回的头部信息中有当前域: // 允许 http://localhost:8080 这个网站打开的页面中的j ...

  2. vue 跨域配置代理 get/post 请求

    1.第一步要有 axios 插件 : npm i axios 首先要在自己的项目手动添加一个文件 vue.config.js 个人理解的为 这是axios 封装的跨域文件. 2.vue.config. ...

  3. Django 处理跨域的配置、前台处理ajax

    一. Django处理跨域 跨域的处理方式有很多,使用最多的就是CORS(跨域资源共享),接下来大致提一下django中处理跨域的配置. 首先安装django-cors-headers模块: pip ...

  4. django允许跨域请求配置

    django允许跨域请求配置 下载corsheader pip install django-cors-headers 修改setting.py中配置 在INSTALLED_APPS中增加corshe ...

  5. vue跨域问题解决(生产环境)

    vue跨域问题解决(使用webpack打包的) 配置代理:(config下index.js文件) module.exports = { dev: { env: require('./dev.env') ...

  6. nginx-springboot-vue前后端分离跨域配置

    nginx-springboot-vue前后端分离跨域配置 引言 接着上篇--简单的springboot-vue前后端分离登录Session拦截的demo,其中跨域是通过springboot后端全局设 ...

  7. vue跨域处理

    本人对于vue跨域处理流程不是很清楚,特此理顺一遍. 1.在config中进行配置,该文件不是都存在,需要自己建: proxyTable,这个参数主要是一个地址映射表,你可以通过设置将复杂的url简化 ...

  8. vue 跨域 springCloud @CrossOrigin注解

    vue 跨域  springCloud @CrossOrigin注解 一丶什么是跨域 跨域问题来源于浏览器的同源策略,浏览器为了提高网站的安全性,在发送ajax请求时,只有在当前页面地址与请求地址的协 ...

  9. [转]vue跨域解决方法

      vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...

随机推荐

  1. WEB漏洞——文件上传

    有关文件上传的知识 为什么文件上传存在漏洞 上传文件时,如果服务端代码未对客户端上传的文件进行严格的验证和过滤就容易造成可以上传任意文件的情況,包括上传脚本文件(asp.aspx.php.jsp等格式 ...

  2. 什么是内存屏障? Why Memory Barriers ?

           要了解如何使用memory barrier,最好的方法是明白它为什么存在.CPU硬件设计为了提高指令的执行速度,增设了两个缓冲区(store buffer, invalidate que ...

  3. OSS对象存储的文件上传、解冻、下载与查看

    上传文件 cp命令用于上传.下载.拷贝文件. # 语法 ./ossutil cp [-r] file_url cloud_url # 例如 ossutil64 cp -r /remote/closed ...

  4. 口护万亿市场杀出的实力派 Oclean欧可林

    撰文 |懂懂 编辑 | 秦言 来源:懂懂笔记 在"青年必去的电影节"上,发现了一个跟他们打成一片的智能护齿"新星". 25日,备受关注的第15届FIRST青年电 ...

  5. 【第十七篇】- Maven Web 应用之Spring Cloud直播商城 b2b2c电子商务技术总结

    Maven Web 应用 本章节我们将学习如何使用版本控制系统 Maven 来管理一个基于 web 的项目,如何创建.构建.部署已经运行一个 web 应用. 创建 Web 应用 我们可以使用 mave ...

  6. Java学习笔记--常用容器

    容器 1. 出现原因 解决程序运行时需要创建新对象,在程序运行前不知道运行的所需的对象数量甚至是类型的问题. Java中提供了一套集合类来解决这些问题包括:List.Set.Queue.Map 2. ...

  7. ORACLE 12C Identity Column(身份列) 实现自增长字段

    Oracle 12c提供的Identity Column特性简化了自增字段的定义. 声明自增字段通常有3种常见的用法,以下三种方式都支持INSERT语句中省略自增字段的插入,但有些许差别. 1. GE ...

  8. MapReduce 示例:减少 Hadoop MapReduce 中的侧连接

    摘要:在排序和reducer 阶段,reduce 侧连接过程会产生巨大的网络I/O 流量,在这个阶段,相同键的值被聚集在一起. 本文分享自华为云社区<MapReduce 示例:减少 Hadoop ...

  9. php升级版本后的影响5.5->7.1

    微信开发中之前常用到$GLOBALS['HTTP_RAW_POST_DATA'] ,但升级后这个参数不见了,导致了一系列错误, 可以用 file_get_contents('php://input') ...

  10. centos7.6,nginx1.18,php-7.4.6,mysql-5.7.30 安装

    #1.下载,来自各官网 nginx-1.18.0.tar.gz php-7.4.6.tar.gz mysql-5.7.30-linux-glibc2.12-x86_64.tar.gz #下载到本地再传 ...