CODEWITHSUNDEEP
vue.jscors
Ângelo Rigo
Ângelo Rigo

Reputation: 2165

Vue. js CORS issues, backend data blocked by CORS policy

I am using Vuejs with CLI 3.6.3 and i am facing CORS issue so i can not get the backend api data.

The error message is :

Access to XMLHttpRequest at 'http://...' 
from origin 'http://localhost:8080' 
has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

I do create a vue.config.js file :

module.exports = {
    devServer: {
      proxy: 'https://my/site/myapi/myindex.php',
  }
}

import axios and declare crossDomain equals true:

import axios from "axios";
axios.defaults.crossDomain = true;

And at the backend i do declare: 

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');

How can i access the backend api data without facing CORS issues ?

Upvotes: 1

Views: 2306

Answers (2)

RISHIKESH PAL
RISHIKESH PAL

Reputation: 236

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: *');

This is should be there where is api is accepting the request

Upvotes: 2

Ângelo Rigo
Ângelo Rigo

Reputation: 2165

After declaring :

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');

At the construct method of the backend it start to work.

Upvotes: 0

Related Questions