Issue
I have a vCenter, that i would like to integrate with my react based website. So i have chosen AXIOS to realize API features.
This is my code, which is responsible for AXIOS request. I want to do at a least GET request.
const src = "https://x.x.x.x/rest/vcenter/vm"
axios
.get(src, {
method: 'get',
auth: {
username: "*",
password: "*"
},
headers: {'vmware-api-session-id': '1b54796fd291d3fe3bf516f26bd54236', 'Content-Type': 'application/json','Access-Control-Allow-Origin': '*','Accept': 'application/json',
'Access-Control-Allow-Methods': 'DELETE, POST, GET, OPTIONS',
'Access-Control-Allow-Headers': 'Origin, X-Auth-Token, Content-Type, Authorization, X-Requested-With'},
responseType: 'json',
httpsAgent: { rejectUnauthorized: false }
})
.then(function (response) {
console.log("success!!");
console.log(response)
})
.catch(function (response) {
//handle error
console.log("error!!");
console.log(response)
});
It gives me CORS issue error:
Access to XMLHttpRequest at 'https://x.x.x.x/rest/vcenter/vm' from origin 'http://localhost:3000' 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.
Which I could handle by using self-created proxy. But this proxy returns
code: 'UNABLE_TO_VERIFY_LEAF_SIGNATURE'
I can easily make CURL requests from my laptop to the API. Can anybody advice me a solution? Maybe i should change AXIOS for something else with CURL based requests, i don't know. Or vmWare can be better handled with anything else?
p.s I'm learning, thank you!
Solution
Okay, I had an incorrect approach before. I tried to pass header parameters in my React app. But, instead, i applied them on my proxy side and everything works now.
React app code:
const src = "http://localhost:4000/data"
axios
.get(src)
.then(function (response) {
console.log("success!!");
console.log(response)
})
.catch(function (response) {
//handle error
console.log("error!!");
console.log(response)
});
My proxy code:
// packages import
const express = require("express");
const app = express();
const cors = require("cors");
const axios = require("axios");
const https = require("https");
// enable CORS
app.use(cors());
// set the port on which our app wil run
// important to read from environment variable if deploying
const port = process.env.PORT || 4000;
const httpsAgent = new https.Agent({
rejectUnauthorized: false,
},
)
// basic string route to prevent Glitch error
app.get("/api", (req, res) => {
res.send("Hello World!");
});
// the route we're working with
app.get("/data", (req, res) => {
// replace with a custom URL as required
axios.defaults.httpsAgent = httpsAgent
const backendUrl = "https://x.x.x.x/rest/vcenter/vm";
// return the data without modification
axios.get(backendUrl,
{
method: 'get',
headers: { 'vmware-api-session-id': '1b54796fd291d3fe3bf516f26bd54236',
'Content-Type': 'application/json','Access-Control-Allow-Origin': '*','Accept': 'application/json',
'Access-Control-Allow-Methods': 'DELETE, POST, GET, OPTIONS',
'Access-Control-Allow-Headers': 'Origin, X-Auth-Token, Content-Type, Authorization, X-Requested-With'},
responseType: 'json',
}
).then(response => res.send(response.data));
});
// console text when app is running
app.listen(port, () => {
console.log(`Server listening at http://localhost:${port}`);
});
Answered By - Alexander Sinchenko Answer Checked By - Marilyn (WPSolving Volunteer)