vue.js+DRF跨域访问图片
一、背景
在前后端分离过程时,后端服务器只开放本地接口,而前端则开放IP接口,在DRF响应请求时,会把域名(locahost+port)响应给前端服务器,前端服务器把再把数据响应给浏览器,浏览器在解析相应资源时就会报错。
二、解决方案
要点:
1. 关闭DRF自动合成资源完整链接(域名+资源路径)
2.在VUE端合成对外开放的完整链接(IP+资源链接)
方法:
DRF部分(serializers)
class GoodsFrontImageSerializer(serializers.ModelSerializer):
url = serializers.SerializerMethodField(read_only=True)
class Meta:
model = Goods
fields = ('url',)
def get_url(self, obj):
try:
return 'api/' + obj # obj:DRF可访问链接
except:
return None
class GoodsSerializer(serializers.ModelSerializer):
goods_front_image = GoodsFrontImageSerializer()
class Meta:
model = Goods
fields = "__all__"
VUE部分(xx.vue)
<template>
<div class="hello">
<h1></h1>cc
<ul>
<li v-for="inf in info['results']">
<img :src="inf.goods_front_image.url">
</li>
</ul>
</div>
</template>
<script>
export default {
el: '#app',
data () {
return {
info: null
}
},
mounted () {
this.$axios
.get('/goods/')
.then(response => (this.info = response.data))
}
}
</script>
三、效果
在另外一台服务器上访问。
vue.js+DRF跨域访问图片的更多相关文章
- Vue用axios跨域访问数据
Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...
- Vue开发环境跨域访问
Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下 module.exports = { dev: { // Paths assetsSubD ...
- JS Ajax跨域访问
js ajax跨域访问报"No 'Access-Control-Allow-Origin' header is present on the requested resource 如果请求的 ...
- js iframe跨域访问
1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc ...
- Springboot 项目源码 Activiti6 工作流 vue.js html 跨域 前后分离 websocket即时通讯
特别注意: Springboot 工作流 前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ activiti6.0.0+ mybaits+maven+接 ...
- Springboot vue.js html 跨域 前后分离 shiro权限 集成代码生成器
本代码为 Springboot vue.js 前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ mybaits+maven+接口 前端页面:html + ...
- Springboot Activiti6 工作流 集成代码生成器 shiro 权限 vue.js html 跨域 前后分离
官网:www.fhadmin.org 特别注意: Springboot 工作流 前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ activiti6.0 ...
- Springboot vue.js html 跨域 前后分离 Activiti6 工作流 集成代码生成器 shiro 权限
官网:www.fhadmin.org 特别注意: Springboot 工作流 前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ activiti6.0 ...
- Springboot 项目源码 vue.js html 跨域 前后分离 shiro权限
官网:www.fhadmin.org 特别注意: Springboot 工作流 前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ activiti6.0 ...
随机推荐
- Visual Studio 2019更新到16.2.3
Visual Studio 2019更新到16.2.3 此次更新,包括以下内容: (1)修复找不到Android SDK的bug. (2)修复安装结束后,无法启动的bug. (3)修复关闭VS时, ...
- 为什么vue组件的属性,有的需要加冒号“:”,有的不用?
https://segmentfault.com/q/1010000010929963/a-1020000010930077 <tab :line-width="2" act ...
- Android studio 运行打包 Ionic 项目
1.创建项目 ionic start myapp tabs 2.cd 到项目文件夹中 3.ionic cordova platfrom add android 执行这个命令后建议修改一下应用包名称,参 ...
- ES6深入浅出-4 迭代器与生成器-3.生成器 & for...of
迭代器平时用的很少.但是如果你是写框架的,你会经常用到迭代器. 生成器是专门用来做迭代器的东西 发布器是要产生一个叫做next的对象,如果你要产生这种对象.就可以使用ES6新出的语法. ES6的新语法 ...
- How to Plan and Configure YARN and MapReduce 2 in HDP 2.0
As part of HDP 2.0 Beta, YARN takes the resource management capabilities that were in MapReduce and ...
- HR数据分析常用的50个公式
HR数据分析常用的50个公式 HR经常需要和数据打交道,如入职率.离职率.加班费计算等.虽然日常工作中,单个数据的计算并不麻烦,但几十上百个累计在一起,确实很容易混淆,甚至计算失误.今天小编急HR之所 ...
- LeetCode_374. Guess Number Higher or Lower
374. Guess Number Higher or Lower Easy We are playing the Guess Game. The game is as follows: I pick ...
- LeetCode_204. Count Primes
204. Count Primes Easy Count the number of prime numbers less than a non-negative number, n. Example ...
- JS获当前网页元素高度offsetHeight
本文测试的是offsetHeight,获取网页中某元素的高度,单位是像素,获取的类型是整型,可以进行数字运算.如图,网页中的元素本身的高度包括,自身的内容+padding+border,而margin ...
- 【Leetcode_easy】892. Surface Area of 3D Shapes
problem 892. Surface Area of 3D Shapes 题意:感觉不清楚立方体是如何堆积的,所以也不清楚立方体之间是如何combine的.. Essentially, compu ...