OpenAI API - net::ERR_CONNECTION_TIMED_OUT - javascript

Attempting to play with the OpenAI API and make an image generator to learn.
But the error always returns Failed to fetch at HTMLFormElement. And also net::ERR_CONNECTION_TIMED_OUT
The code can be seen here: https://playcode.io/1207312
And the live site for now is here: https://mili.website/
What am I doing wrong with? Is it related to ports or headers: ?

Related

API working with POSTMAN but not with fetch [duplicate]

This question already has an answer here:
Fetching API json data alert: Content Security Policy: The page’s settings blocked the loading of a resource at
(1 answer)
Closed 4 months ago.
I know there have been lots of questions on this topic and I read them all but not able to resolve my issue so asking here.
I am getting the following error while trying to access an api using fetch-
Refused to connect to 'https://xxxxx/api' because it violates the
following Content Security Policy directive: "connect-src 'self'
updates.developer.mozilla.org
www.google-analytics.com stats.g.doubleclick.net"
I don't have any control over this api so I can't add anything to connect-src. When making a fetch(api_url) request I am getting the above error but while making the same GET request from POSTMAN(or directly from url bar of browser) then I am able to receive the response body(which is an xml).
Also while making a fetch request with mode set to 'no-cors' I am able to get a response but not the response body. I want the response body.
What is POSTMAN doing differently? How can I achieve the same using fetch()?
Try installing the 'CORS Unblock' chrome extension and then run your application. Also, this error generally occurs when we use an API link as http://'apilink' when the link is https://'apilink' or vice-versa. Please check that as well.

Is there a way to read network response status codes from the Browser in React?

I am making a function call using a private node package that calls an API. This package however does not return a response when the function that makes the API request is called. Thus there is no way of verifying if the HTTP request was successful unless you check the Network tab in the browser's developer tools for the response code.
I was wondering if anyone had any idea on how to read these status codes in my situation, I found a useful package but it is in React Native, please see here: https://www.npmjs.com/package/react-native-network-logger
Any ideas or package recommendations would be greatly appreciated!
you can find the response status code in HEADERS

Nuxt 3 useFetch returns NetworkError when attempting to fetch resource

I am trying to retrieve data from my local API. I can succesfully retrieve data when using Postman but when I use "useFetch" inside my setup in Nuxt 3 it returns a NetworkError when attempting to fetch resource.
When I do the exact same call but to a free online test API (https://jsonplaceholder.typicode.com/posts) it does work. That makes me think that the useFetch has difficulty connecting to local host maybe?
Does anyone know how I can fix this?
await useFetch(() => 'localhost:8077/my-url-here', { method: 'POST' }).then((response) => {
console.log(response)
})
In my network tab nothing shows up, so I don't really know how to debug this.
NetworkError when attempting to fetch resource. ()
That's what is visible in the console log.
Theres another error but its very long.
FetchError#http://localhost:3000/_nuxt/node_modules/ohmyfetch/dist/chunks/fetch.mjs?v=9b9b31cd:6:5\ncreateFetchError#http://localhost:3000/_nuxt/node_modules/ohmyfetch/dist/chunks/fetch.mjs?v=9b9b31cd:18:22\nonError#http://localhost:3000/_nuxt/node_modules/ohmyfetch/dist/chunks/fetch.mjs?v=9b9b31cd:95:33\ncreateFetch/$fetchRaw2/ctx.response<#http://localhost:3000/_nuxt/node_modules/ohmyfetch/dist/chunks/fetch.mjs?v=9b9b31cd:136:14\npromise callback*$fetchRaw2#http://localhost:3000/_nuxt/node_modules/ohmyfetch/dist/chunks/fetch.mjs?v=9b9b31cd:131:58\n$fetch2#http://localhost:3000/_nuxt/node_modules/ohmyfetch/dist/chunks/fetch.mjs?v=9b9b31cd:157:12\nuseFetch/asyncData<#http://localhost:3000/_nuxt/node_modules/nuxt/dist/app/composables/fetch.mjs:28:12\nuseAsyncData/asyncData.refresh#http://localhost:3000/_nuxt/node_modules/nuxt/dist/app/composables/asyncData.mjs:46:52\ninitialFetch#http://localhost:3000/_nuxt/node_modules/nuxt/dist/app/composables/asyncData.mjs:68:40\nuseAsyncData#http://localhost:3000/_nuxt/node_modules/nuxt/dist/app/composables/asyncData.mjs:80:7\nuseFetch#http://localhost:3000/_nuxt/node_modules/nuxt/dist/app/composables/fetch.mjs:27:33\nsendRequest#http://localhost:3000/_nuxt/pages/keyword.vue?t=1657198726330:29:9\nasync*callWithErrorHandling#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:1365:18\ncallWithAsyncErrorHandling#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:1373:38\ninvoker#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:7434:33\nEventListener.handleEvent*addEventListener#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:7396:6\npatchEvent#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:7410:23\npatchProp#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:7461:17\nhydrateElement#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4901:21\nhydrateNode#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4847:24\nhydrateChildren#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4950:16\nhydrateElement#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4918:35\nhydrateNode#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4847:24\nhydrateChildren#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4950:16\nhydrateElement#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4918:35\nhydrateNode#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4847:24\nhydrateChildren#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4950:16\nhydrateElement#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4918:35\nhydrateNode#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4847:24\nhydrateChildren#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4950:16\nhydrateElement#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4918:35\nhydrateNode#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4847:24\nhydrateChildren#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4950:16\nhydrateElement#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4918:35\nhydrateNode#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4847:24\nhydrateSubTree#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:5502:24\ncomponentUpdateFn#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:5510:13\nrun#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:384:19\nsetupRenderEffect/instance.update#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:5600:52\nsetupRenderEffect#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:5608:5\nmountComponent#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:5447:22\nhydrateNode#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4852:25\nhydrateSuspense#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:2392:29\nhydrateNode#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:4875:33\nhydrateSubTree#http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=9b9b31cd:5502:24\n

Face++'s JavaScript demo doesn't work even though I got api key and api secret

I've been working on Face++'s JavaScript demo in the SDK.
Face++ is a face detection api made in China
I'd like to ask to people who worked on this api.
The SDK: https://github.com/FacePlusPlus/facepp-javascript-sdk
I registered and got my free version of api key and api secret.
I followed the read me and tried the face detection. But even though I put my api key and api secret at line4 and 5 in the common.js, the demo doesn't work with my uploaded photo.
I always get error says
[Error] Origin http://127.0.0.1:3000 is not allowed by Access-Control-Allow-Origin.
[Error] XMLHttpRequest cannot load https://api-cn.faceplusplus.com/facepp/v3/detect due to access control checks.
[Error] Failed to load resource: Origin http://127.0.0.1:3000 is not allowed by Access-Control-Allow-Origin. (detect, line 0)
or just callback function failed()
Is this because my plan is free type? Or I missed something else?
Thanks in advance:))

openstack identity api get response error code

im intern student. I have a question .
Im working to bug/fix on an Openstack cloud , Javascript and nodejs web app. Now im fixing toastr.error messages and then translate message's language.
How can i get openstack-identity-api response error code ? I have some documents about error code's reason like this.
Code Reason
204 - No Content The server has fulfilled the request.
Error¶
Code Reason 400 - Bad Request Some content in the request was invalid
401 - Unauthorized User must authenticate before making a request.
403 - Forbidden Policy does not allow current user to do this
operation.
404 - Not Found The requested resource could not be found.
409 - Conflict This operation conflicted with another operation on
this resource.
https://developer.openstack.org/api-ref/identity/v3/?expanded=change-password-for-user-detail
Example :
if(resp.error === 401){
toastr.error("Authentication failure. Please contact the system administrator.");}
Could you please explain your ask here? The Openstack API document you have referred clearly shows the response codes and what might be the cause for each error code. What additional info you would require?

Categories