vue.js - Vuejs with Axios - getting ''cross-origin" error when using get request

My vue project lies in this url "http://localhost:8081/".

I want to connect to the backend which is in another url "http://localhost:8082/Fleet-App/api/deptList".

But when I make a call I am getting an error like this

Failed to load http://localhost:8082/Fleet-App/api/deptList: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access***".

Kindly help me to resolve this issue.

sample.vue

http-common.js

import axios from 'axios'

const API_URL = process.env.API_URL || 'http://localhost:3000/api/v1'

export const AXIOS = axios.create({

  baseURL: `http://localhost:8082/Fleet-App/api/`,
  withCredentials: false,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + localStorage.token,
    'Access-Control-Allow-Origin': '*',
    'Accept' : 'application/json, text/plain, */*',
    'Access-Control-Allow-Methods' : 'GET, PUT, POST, DELETE, OPTIONS',
    'Access-Control-Allow-Credentials' : true
  }

})

Thanks in advance.

Answer

Looks like your server does not include the Access-Control-Allow-Origin header in response your request. A CORS request will fail if Access-Control-Allow-Origin is missing.

Here are some useful articles that explain how CORS works:

https://www.html5rocks.com/en/tutorials/cors/

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Basically, the problem is on the server, not in your vue.js client

Hope this helps!