Access to fetch at '127.0.0.1:8000/api/v1/movie' from origin 'localhost:8080' has been blocked by CORS policy. How to solve the problem?

Question

CORS

Greetings! Kindly tell me how to solve the problem

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.

The back is written in DRF, the front is written in 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>

Host connected to Cors

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

Answer 1

I won’t say anything about django and what’s with CORS, but if you use @vue / cli or just webpack to develop the front on the same machine, this is conveniently solved on the devServer side by setting a proxy , which actually transparently proxies all requests to the back where you specify , without additional server configuration.

Answer 2

backendUrl: "http://127.0.0.1:8000/api/v1"
Here I propose to change the IP address to localhost so that the origin is really the same.