1

I am trying to fetch data from another website with vue axios with the help of API. But I am getting this error

Access to XMLHttpRequest at 'https:URL' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I use vue cors library but it is not working

import Vue from 'vue'
import axios from 'axios';
import {api} from "../../config";
import AxiosPlugin from 'vue-axios-cors';
Vue.use(AxiosPlugin)
export default {
  data () {
    return {
      selected: [],
      e7: [],
      projects: [],
      urls:['/api/abc','api/212'],
      apis:[]


    }
  },
  
  methods:{
    getTickets(){
      const headers = {
        'Content-Type': 'text/plain'
      };

      this.$axios.get(this.selected+'api/tickets/fetch_tickets').then((res)=>{
      console.log(res.data)
      })
    }
  }

}
web pakistan
  • 452
  • 2
  • 14

1 Answers1

0

If the CORS configuration isn't setup correctly, the browser console will present an error like "Cross-Origin Request Blocked"; This is used to explicitly allow some cross-origin requests while rejecting others. For example, if a site offers an embeddable service, it may be necessary to relax certain restrictions.

We usually handle this configuration in back-end but you can fix this on your local system by adding Allow-Control-Allow-Origin to your chrome browser and adding your localhost in it. There is a similar question that might help you down the line:

how to fix 'Access to XMLHttpRequest has been blocked by CORS policy' Redirect is not allowed for a preflight request only one route

ma_jafari
  • 938
  • 1
  • 3
  • 22