Axios不发送API请求(飞行前也不是正常)
我正在尝试通过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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论