Axios不发送API请求(飞行前也不是正常)

发布于 2025-02-08 15:31:13 字数 3017 浏览 1 评论 0原文

我正在尝试通过http://127.0.0.1:8000拨打自己的API。 当我从新的React App NPX创建反应式应用程序中进行操作时,它可以正常工作:...具有相同的功能。它也可以从其他应用程序(例如Pycharm测试等)中运行良好。 在我的应用程序中(这是使用Yeoman Generator构建的,用于Office Task Pane添加INS),我可以调用其他API(我不主持自己)。 我研究了潜在的CORS问题,但我认为我在API和Webpack中调整了所有问题,这些问题在这里回答的其他问题中都看到了。 CORS也不是真的,因为API服务器甚至没有注册我的应用程序的飞行前请求,因此某种程度上什么都没有出现(当我调用其他API时它可以起作用)。

以下函数调用API:

  getPlayground2 = async (name, prompt, engine, purpose, format, max_tokens, temperature, user) => {
    let configObject = {
      url: "http://127.0.0.1:8000/completion",
      method: "post",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      data: {
        name: name,
        prompt: prompt,
        engine: engine,
        purpose: purpose,
        format: format,
        max_tokens: max_tokens,
        temperature: temperature,
        user: user,
      },
    };
    // console feed for dev
    // grab available models
    console.log("playground2 called");
    axios
      .request(configObject)
      .then((res) => {
        //console.log(res);
        console.log(res.status);
        console.log(res.data);
        console.log("test");
        const completion = res.data.choices[0].text;
        return Promise.resolve(completion);
      })
      .catch((error) => {
        console.log(error.response);
        return Promise.reject();
      });
  };

Axios Interceptor显示以下请求:

{transitional: Object, adapter: ƒ xhrAdapter(), transformRequest: Array(1), transformResponse: Array(1), timeout: 10000…}
▶transitional: Object
▶adapter: ƒ xhrAdapter() {}
▶transformRequest: Array(1)
▶transformResponse: Array(1)
 timeout: 10000
 xsrfCookieName: "XSRF-TOKEN"
 xsrfHeaderName: "X-XSRF-TOKEN"
 maxContentLength: -1
 maxBodyLength: -1
▶env: Object
▶validateStatus: ƒ validateStatus() {}
▶headers: Object
 Accept: "application/json"
 Content-Type: "application/json"
 url: "http://127.0.0.1:8000/completion"
 method: "post"
 data: "{"name":"button_playground_curie_prose_call","prompt":"I walk my dog to","engine":"curie","purpose":"playground","format":"prose","max_tokens":50,"temperature":0.7,"user":"devuser"}"

显示该功能中的console.logs正在显示(尽管在其他测试应用程序中,但它们可能是一个)(尽管这可能是一个我的控制台问题吗?)

然后,承诺将其解析为未定义的 尝试console.log res.data

webpack配置

/* webpack.config.js*/
...
    devServer: {
      hot: true,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "*",
        "Access-Control-Allow-Headers": "*",
      },
      https: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
      port: process.env.npm_package_config_dev_server_port || 3000,
    },

进一步我尝试使用fetch,但是这也引发了我无法解密的错误(不幸的是,这是Microsoft添加的任务窗格,因此我看不到正确的控制台日志)。 这两种方法都不是我的API(快速API),甚至注册了传入请求。

我有点迷路了,是什么可能导致问题以及在哪里寻找问题

I am trying to call my own API at http://127.0.0.1:8000.
It works fine when I do it from a fresh react app npx create-react-app: ... with the same functions. It also works fine from other Apps (like the pycharm testing etc).
Within my app (that was build with the yeoman generator for office task pane add ins) I am able to call other APIs (that I don't host myself).
I looked into potential CORS issues but in my opinion I adjusted everything in the API and in the webpack that I saw in other questions that were answered here. CORS also can't really be, since the API server doesn't even register a pre-flight request by my app, so somehow just nothing gets out (it works however when I call other APIs).

The following function calls the API:

  getPlayground2 = async (name, prompt, engine, purpose, format, max_tokens, temperature, user) => {
    let configObject = {
      url: "http://127.0.0.1:8000/completion",
      method: "post",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      data: {
        name: name,
        prompt: prompt,
        engine: engine,
        purpose: purpose,
        format: format,
        max_tokens: max_tokens,
        temperature: temperature,
        user: user,
      },
    };
    // console feed for dev
    // grab available models
    console.log("playground2 called");
    axios
      .request(configObject)
      .then((res) => {
        //console.log(res);
        console.log(res.status);
        console.log(res.data);
        console.log("test");
        const completion = res.data.choices[0].text;
        return Promise.resolve(completion);
      })
      .catch((error) => {
        console.log(error.response);
        return Promise.reject();
      });
  };

The axios interceptor shows the following request:

{transitional: Object, adapter: ƒ xhrAdapter(), transformRequest: Array(1), transformResponse: Array(1), timeout: 10000…}
▶transitional: Object
▶adapter: ƒ xhrAdapter() {}
▶transformRequest: Array(1)
▶transformResponse: Array(1)
 timeout: 10000
 xsrfCookieName: "XSRF-TOKEN"
 xsrfHeaderName: "X-XSRF-TOKEN"
 maxContentLength: -1
 maxBodyLength: -1
▶env: Object
▶validateStatus: ƒ validateStatus() {}
▶headers: Object
 Accept: "application/json"
 Content-Type: "application/json"
 url: "http://127.0.0.1:8000/completion"
 method: "post"
 data: "{"name":"button_playground_curie_prose_call","prompt":"I walk my dog to","engine":"curie","purpose":"playground","format":"prose","max_tokens":50,"temperature":0.7,"user":"devuser"}"

None of the console.logs in that function are being shown (in the other test apps they are though)(although that might be an issue with my console?)

The promise then resolves to undefined
When trying to console.log res.data

Webpack Configurations

/* webpack.config.js*/
...
    devServer: {
      hot: true,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "*",
        "Access-Control-Allow-Headers": "*",
      },
      https: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
      port: process.env.npm_package_config_dev_server_port || 3000,
    },

Further I tried to use fetch however that also throws an error that I can'T decrypt (unfortunately this is a task pane add in for microsoft, so I can't see the correct console logs).
With neither of the two methods is my API (Fast API) even registering an incoming request.

I am a bit lost, as to what might cause the problem and where to look further

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文