vue.js+DRF跨域访问图片

一、背景

  在前后端分离过程时,后端服务器只开放本地接口,而前端则开放IP接口,在DRF响应请求时,会把域名(locahost+port)响应给前端服务器,前端服务器把再把数据响应给浏览器,浏览器在解析相应资源时就会报错。

vue.js+DRF跨域访问图片_第1张图片

 

二、解决方案

  要点:

    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)

      


三、效果

  在另外一台服务器上访问。

  vue.js+DRF跨域访问图片_第2张图片

 

转载于:https://www.cnblogs.com/qingkongwuyun/p/11485786.html

你可能感兴趣的:(vue.js+DRF跨域访问图片)