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

Question

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

<template>
 <b-card>
    <h5 class="card-title">Outside Order</h5>
    <hr>
     <div class="form-group row">
    <label for="" class="col-sm-2 col-form-label">Order #</label>
    <div class="col-sm-2">
     <input class="form-control" type="text" placeholder="Default input">
    </div>

    <label for="" class="col-sm-2 col-form-label">Order Type</label>
    <div class="col-sm-2">
      <select class="form-control">
        <option>Bulk</option>
        <option>Container</option>
      </select>
    </div>

     <label for="" class="col-sm-2 col-form-label">Status</label>
    <div class="col-sm-2">
      <select class="form-control">
        <option>Active</option>
        <option>In-Active</option>
      </select>
    </div>
  </div>

  <div class="form-group row">
    <label for="" class="col-sm-2 col-form-label">Order Date</label>
    <div class="col-sm-2">
     <input class="form-control" type="text" placeholder="DD-MMM-YYYY">
    </div>
  </div>
 </b-card>
</template>

<script>
import {AXIOS} from '../../components/http-common'

export default {
  name: 'order',
  mounted(){
     AXIOS.get('/deptList')
      .then(response => {
        console.log(JSON.stringify(response.data))
      })
      .catch(e => {
        this.errors.push(e)
      })
   }
}
</script>

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.

Solution

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!

Comments

[Ashwini]

Thanks @Marco Dagrada. Problem in server side only. I have added cors filter in server. Now Iam able to connect the server which lies in different port