AxiosError: Request failed with status code 40X - javascript

`hello im begineer to reactjs and imoracticing. i got problem here and i cant find the solution. i even regenerated api token and past in in .env file also the url
im using strapi cms for backend
I used axios library to fetch data from api but it gives error 404 first it gave 403 now 404
REACT_APP_API_TOKEN = 8bf07e7137c455bd18d24b31b0248398cd9a253eddf845d0c9b661072c85ad1057d3dcc02c22d07d70cb22c94eb7f2f8ebf9792871a1112350c1ce21d3db1cedfad5f3811fd168e5b819bad76979e7684973837bb8cab5f01df07d64dbb2211e1336d9b37780bbb6deb3bcf8f89a029eb9c3882c7d0f8f866f33fe50ac3fd59d
REACT_APP_API_URL = http://localhost:1337/api
//this is .env file
enter image description here
this is that file which i mentioned above
i have also import axios from axios
enter image description here
this is my strapi
enter image description here
this is api folder where im getting all the data from strapi where i upload images
enter image description here
this is the error`

you have two problems in your code to be addressed
403 Forbidden
missing space after type of "Authentication scheme"
Authorization: Bearer xxxxxxxxxxx
RFC 6750 > Section 2.1. Authorization Request Header Field
404 Not Found
address like this cannot never exists http://localhost:3000/localhost:1337/api/products (you have localhost with port twice in the URL)
this part is not shared with us
reasons may be two
wrong variable process.env.REACT_APP_API_URL
more probably default base url for axios localhost:3000

Authorization : Bearer token
There is patter we should follow as above one.
Check your token with console whether it is being passed, also if the passed token is valid since your request giving 40x response.
Your axios configuration should be identified what type of authorization being passed

Related

Download and save MJPEG with http command (Javascript)

I'm using a hikvision IP camera that streams 30 MJPEG images per second to a certain http url and Javascript Reactjs with nodejs and express as backend.
Also hikvision provides a url to snap the camera image when you open the link.
Example link:
http://192.168.0.109/ISAPI/Streaming/channels/1/picture
I want to download that image and store it as a local file on my computer, I know how to store it but I haven't been able to download the image programatically.
I followed the next guide to get those API endpoints (stream and snapshot):
HIKVISION TUTORIAL
My question is, how do I fetch or download that image ?
I have tried with fetch without success.
Not sure but as long as I understand it requires a basic digest authorization and I haven't find how to fetch with digest auth. If I open the link directly on my browser, a pop up prompts and ask me for my username and password.
Everytime I try to fetch the response is :
GET http://192.168.0.109/ISAPI/Streaming/channels/1/picture net::ERR_ABORTED 401 (Unauthorized)
There is also some parameters to this API command on documentation that includes a json format that I have tried without success:
Also, as you can see on HIKVISION TUTORIAL there is an url to get the stream, I'm able to reproduce that MJPEG stream on front-end with the next code with no issues:
<img
width={"90%"}
height={"60%"}
alt="stream"
src={"http://192.168.0.109/ISAPI/Streaming/channels/102/httpPreview"}
id="cam1"
/>
net::ERR_ABORTED 401 (Unauthorized)
Based on the error you presented, I suspect that you have set a username/password.
The documentation (that you linked to in your question) explains that if you have set a username/password, then you need to use Basic auth:
http://<username>:<password>#<IP address of IPC>:<HTTP
port>/ISAPI/Streaming/channels/1/picture
So, if the local IP address that you're using is 192.168.0.109, then the URL format would be:
http://<username>:<password>#192.168.0.109/ISAPI/Streaming/channels/1/picture
and <username> and <password> would be your actual username and password.
Note that this URL format is deprecated in many environments. You can send the auth data in the request headers instead:
function setBasicAuthHeader (headers, username, password) {
// In Node:
const encoded = Buffer.from(`${username}:${password}`).toString('base64');
// In a browser/deno:
// const encoded = window.btoa(`${username}:${password}`);
headers.set('Authorization', `Basic ${encoded}`);
}
const username = 'me';
const password = 'secret';
const headers = new Headers();
setBasicAuthHeader(headers, username, password));
// Use headers in your request...

Verification of publisher domain failed. The server returned an unexpected content type header value

I'm using MERN STACK. I've been stuck on this forever now, I've been trying to verify my publisher domain on Azure portal but it keeps telling me that it has invalid header content type, I just downloaded the JSON file they provided and pasted it into the public/.well-known folder in my react app, deployed it to server and then opened it in the browser, it's opening but it's showing an html file to me instead of JSON. I'm new to this and have no idea what to do, I didn't find anything close to a solution on the web.
JSON FILE
{
"associatedApplications": [
{
"applicationId": "my application id"
}
]
}
BROWSER RESULT
Now, it's showing me an html file instead of a JSON object
EXACT RESPONSE FROM AZURE
Verification of publisher domain failed. Error getting JSON file from https://example.com/.well-known/microsoft-identity-association. The server returned an unexpected content type header value
As the guide mentions
The expected 'Content-Type' header that should be returned is application/json. You may get an error as mentioned below if you use anything else...
I am not sure what web server you are deploying your React app to. But depending on that configure your .well-known/microsoft-identity-association file path to be served with 'Content-Type' header as application/json. Or, since you are into MERN stack, you can also consider to create an Express route with same and control the header in response.

Cors block while trying to get Instagram access token on client side using react/js

Okay so im trying to get access token im following the main guide provided by facebook app developers which is: https://developers.facebook.com/docs/instagram-basic-display-api/getting-started. Im at step: 5, where i try to exchange my code for access_token. I do post request to https://api.instagram.com/oauth/access_token however i get cors blocked with this error:
Access to XMLHttpRequest at
'https://api.instagram.com/oauth/access_token' from origin
'https://localhost' has been blocked by CORS policy: Request header
field content-type is not allowed by Access-Control-Allow-Headers in
preflight response.
I literlly tried everything. Adding headers to axios, using ngrok to get an actual secure https: and not self made cert (for dev mode ofc). I also changed the app ouath urls. What could the problem be?
Yeap i allowed urls i did everything. I tried https://cors-anywhere.herokuapp.com/https://api.instagram.com/oauth/access_token it didn't work, it says bad request. However i managed to solve it with an extra library called axios-oauth-client: https://www.npmjs.com/package/axios-oauth-client. After implementing this library and instead of doing axios.post(url, data) but using this library and passing the data in there everything works fine and i get the access token. Something with the headers might have been the problem

Google OAuth2 response_type error on authorization code request

I'm trying to get an authorization code from Google+ API, as described in Step 1(Set authorization parameters) (HTTP/REST).
As I've read there, the Google authorization server has the following mandatory query string parameters: client_id, redirect_uri and scope, so my href would look like this:
https://accounts.google.com/o/oauth2/v2/auth?client_id=123002756467-dmq0soo7rlfc4on640hdsehnrvb700t7.apps.googleusercontent.com&redirect_uri=http://localhost:5000/oAuthCallback&scope=https://www.googleapis.com/auth/glass.location
When trying to access that link, I get the following error:
Error: invalid_request (Required parameter is missing: response_type)
Though, the response_type parameter is not specified in that parameter list at all!
Any ideas how this can be solved?
Fixed. It seems that the spaces in my code editor were also inserted in my link as "%20", so that's why it didn't work.
Since you're following the server documentation, the response_type=code parameter is present in the sample authorization request URL in the next step [1].
You can learn more about response types here: https://developers.google.com/identity/protocols/OpenIDConnect#response-type
[1] https://developers.google.com/identity/protocols/OAuth2WebServer#redirecting

Google OAuth 0.2 Invalid Grant

I Had the following code
$client->setClientId('39605174446-s067746s1jur731n49fujigfh8occ5pa.apps.googleusercontent.com');
$client->setClientSecret('MYCLIENTSECRET');
$client->setRedirectUri('http://examplesss.com/oauth2');
$client->setScopes('https://picasaweb.google.com/data');
$client->setAccessType("offline");
I did authenticate
At my Google Console API, I set it for "Web Application", Authorization Javascript origins I leave it blank.
Authorization Redirect URI I set it as
http://example.com/oauth2
I went to the following site to get my authorisation code
https://accounts.google.com/o/oauth2/auth?access_type=offline&approval_prompt=&client_id=39605174446-s067746s1jur731n49fujigfh8occ5pa.apps.googleusercontent.com&redirect_uri=http://example.com/oauth2&response_type=code&scope=https://picasaweb.google.com/data&state=state
When I went into the site, I press ok to grant "offline access" . After that I am redirect to an none existent site which I use that is example.com and then the URI was something like
http://example.com/oauth2?state=stat&code=4/qWt9q19VtilG6Iw6HFte4RnpiXR0a5q80_zQAU-hNqc#
$client->authenticate('4/qWt9q19VtilG6Iw6HFte4RnpiXR0a5q80_zQAU-hNqc#');
Then I get my refresh token code
$client->refreshToken('1\/vYnZlRcvaY2nD0yh5LhU9paLZZggMArGOo-3rEJHGCM');
But when I run the code it say...
PHP Fatal error: Uncaught exception 'Google_Auth_Exception' with message 'Error refreshing the OAuth2 token, message: '{
"error" : "invalid_grant"
Wonder what went wrong, I just want to access my picasa web album.
Thanks
It can be 2 things. One, is the incorrect use of the versions of the Google API client or the one I think that is the problem, it's on the refresh token and how you're passing the token. It's a problem with the / character in the string, json enconding and how it's passed. Put the refresh token in double quotes and send the variable. If all the data is correct and authorized via Google, it should work.

Categories

Resources