CODEWITHSUNDEEP
vue.jsaxioscors
Servet Tunçel
Servet Tunçel

Reputation: 51

Vue.js - CORS error in local and production

I have got a file that's name is request.js, 

import axios from 'axios'

const baseURL = 'https://SOME_URL.com/api/'

const config = {
  baseURL,
  timeout: 10000,
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': '*',
  }
}

const request = axios.create(config)

export default request

and I'm trying to send request in Vuex Actions;

import request from '../request'

const actions = {
  postData(_, payload){
    return request.post('a-request-url', payload)
  }
}

Sending 2 requests and throws a CORS error when I run request. CORS error Access to XMLHttpRequest at 'https://crm.clinic/api/crm/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response

AND 2 requests like; enter image description here

enter image description here

enter image description here

and the real problem, cors error continious when deploy my code as production. Can you help me?

Upvotes: 0

Views: 18125

Answers (1)

Cray
Cray

Reputation: 2850

If you read the second part in the error it says where the issue is.

Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response

As you can see you need to allow access in preflight response. A preflight request is something the browser does before sending your actual GET/POST/etc request. In the devtools' network tab you have 2 requests for the /login url. First one is a preflight using OPTIONS method.

To fix the issue you need to make sure your backend server returns 'Access-Control-Allow-Origin': 'http://localhost:8080' header in it's response for OPTIONS requests. Currently it is specifying only allowed methods and headers. You don't need to add those headers to your axios request.

Upvotes: 4

Related Questions