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>

三、效果

　　在另外一台服務器上訪問。