Access to fetch at '127.0.0.1:8000/api/v1/movie' from origin 'localhost:8080' has been blocked by CORS policy. Как решить проблему?

Question

[volkov12feb]

Приветствую! Подскажите, будьте добрый, как решить проблему

Access to fetch at 'http://127.0.0.1:8000/api/v1/movie' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Бэк написан на DRF, фронт на Vue.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        backendUrl: "http://127.0.0.1:8000/api/v1"
    },
    mutations: {},
    actions: {},
    modules: {},
    getters: {
        getServerUrl: state => {
            return state.backendUrl
        }
    }
})

export default store

<script>
export default {
  name: 'Home',
  data() {
    return {
      listMovie: [],
      listStar: [1, 2, 3, 4, 5]
    }
  },
  components: {},
  created() {
    this.loadListMovies()
  },
  methods: {
    async loadListMovies() {
      this.listMovie = await fetch(
          `${this.$store.getters.getServerUrl}/movie`
      ).then(response => response.json())
      console.log(this.listMovie)
    }
  }
}
</script>

Хост подключен к Cors

CORS_ORIGIN_WHITELIST = [
    'http://localhost:8080',
    'http://127.0.0.1:8000'
]

Answer 1

[Aetae]

По поводу джанго и что там с CORS ничего не скажу, но если ты используешь @vue/cli или просто webpack для разработки фронта на той же машине, это решается удобно на стороне devServer прописыванием proxy, который собственно прозрачно проксирует все запросы к бэку куда укажешь, без дополнительной настройки сервера.

Answer 2

[Станислав Макаров]

backendUrl: "http://127.0.0.1:8000/api/v1"

Вот тут предлагаю поменять айпишник на localhost, чтобы ориджин был действительно одинаковый.