axios 从基于React的网站获取vmWare API

velaa5lx  于 2022-11-23  发布在  iOS
关注(0)|答案(1)|浏览(137)

我有一个vCenter,我想与我的React为基础的网站集成。所以我选择了AXIOS来实现API功能。
这是我的代码,负责AXIOS请求。我想至少做一个GET请求。

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)
      });

它给我CORS发布错误:

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.

我可以用自己创建的代理来处理。但是这个代理返回

code: 'UNABLE_TO_VERIFY_LEAF_SIGNATURE'

我可以很容易地从我的笔记本电脑向API发出CURL请求。有人能给我建议一个解决方案吗?也许我应该把AXIOS换成其他基于CURL请求的东西,我不知道。或者vmWare可以用其他东西更好地处理?
附言:我正在学习,谢谢!

fiei3ece

fiei3ece1#

好吧,我以前有一个错误的方法。我试图在我的React应用程序中传递头参数。但是,相反,我在我的代理端应用了它们,现在一切都正常了。
React应用程序代码:

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)
});

我的代理代码:

// 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}`);
});

相关问题