I'm using axios and vue.js to play with the Fortnite Tracker API.
In their documentation it's clearly said that we need to include the "TRN-Api-Key" in header.
I tested with Postman and It works.
And this is my axios function to make the request:
let url = `https://api.fortnitetracker.com/v1/profile/${this.platform}/${this.username}`;
// username and platform are from my Vue Component.
axios.get(url, {
headers: {
"TRN-Api-Key": "xxxxxxxx-xxxx-xxxx-xxxx-xxxx" // of course from my account on their website.
}
})
.then(response => console.log(response.data))
I expect the output in json like in Postman but I had a 404 Error: "Network Error".
And in the Browser Network Debug I can't see the request header 'TRN-Api-Key'.
[EDIT]
If your app is running on a server you can write a short PHP-Script and use curl in it to access the API (I think it's even possible to generate PHPcode from Postman).
Just address this script with axios and submit your platform and usernameproperties to build the right url.
Or have a look at this post alternatively. Maybe the use of an other API like #kecinotrab provided in the acceptet answer will help you too.
Related
UPD: you can check this yourself: https://github.com/Rusinas/nuxt-fetch-bug
I know I know this sounds stupid as hell and server language has nothing to do with such problems, but hear me out.
I am trying to load data from my local server using $fetch() (or useFetch, no difference), but I get this error:
FetchError: fetch failed ()
No any other details provided. Server is running using Golang/Fiber. When I am trying to load the same endpoint via Postman, everything is OK:
But when I try to load the SAME endpoint in my nuxt 3 application:
I get this:
But my golang server logging this as success:
The more weird thing about all this is that if I run my nodejs version of the exact same server (or any other random API), I don't get any error.
I am pretty sure that my server working 100% correct, but maybe I lost some header or something, which express put automatically? Here is my response headers:
I also checked nodejs response headers:
Doesn't seem like problem is there.
I have no idea what is happening and I don't know other methods to retrieve async data on server side in nuxt js. I have installed axios, but it throws random errors and works on client side for some reason, which makes using nuxt meaningless. However, axios can call this endpoint and returns my data, but only in browser (despite I call it in setup function without any hooks). I am thinking to switch career now
The problem was that fetch() didn't reconize localhost:9000 for some
reason, but when I changed BASE_URL to 127.0.0.1:9000 it started to
work
I had the same error: FetchError: fetch failed ()
Changing localhost in the url to 127.0.0.1 worked for me.
Writing as a separate answer because some might not find it in the comments.
First I think you are using $fetch in a wrong way, as I've seen Nuxt uses fetch for example:
const data = await fetch(endpoint, {
method: "GET",
mode: "cors"
})
.then(resp => resp.json())
And for the server, just enable CORS header on the response, like this:
// you can replace the asterisk with the clients you want.
c.Append("Access-Control-Allow-Origin", "*")
hope I helped :)
I'm using Vue CLI and axios.
I have a searchbar where the user can input (potentially) any website and read info about the HTTP request and response.
Some of the information I need to get are: HTTP protocol, Status code, Location (if redirected), Date and Server.
What I'm doing is a simple axios GET request taking the input from the searchbar.
I'm trying to get my head around the CORS domain issues, but even then, when I input a CORS supported site like myjson I can access only the CORS-safelisted response headers which are not what I'm looking for.
This is the axios call:
axios
.get(url)
.then((r) => {
console.log(r);
console.log(r.headers.server); //undefined
})
.catch((e) => {
console.error(e);
});
Is the brief I'm presenting even possible?
UPDATE
I've then tried removing the chrome extension I used to enable CORS requests and installed Moesif Origin & CORS Changer extension. After restarting my PC I have now access to the remaining response headers.
I don't really know exactly what went wrong with the previous extension, but hopefully this helps somebody.
It's also worth pointing out that at the current date I'm writing this edit, myjson site has been flagged by chrome as non-safe for privacy issues. I've simply made HTTP requests to other sites and got the response headers as described.
The response to a cross-origin request for https://myjson.dit.upm.es/about contains the CORS-related headers
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, PATCH, PUT, DELETE, POST, OPTIONS
but no Access-Control-Expose-Headers. Without that, a cross-origin client cannot access the Server header, because it is not CORS-safelisted.
It would work if you had your server make the request and evaluate the headers, not the axios client.
I have an issue with cookies setting in postman when I make a post request to my route to login but unfortunately when I use the same info to login via my vue frontend I don't get a set cookie header in my browser or a token but rather it just returns and API key with a value....
not sure if anyone can help explain why this might be the case. Does postman run on localhost itself by default or do they use their own servers to route requests? just wondering if maybe that's the issue?
here's the code I am using to touch the endpoint in my view endpoint
Note: I have a separate axios file with the root url so the route only shows as /login just to clarify
async handleSubmit(){
const response = await axios.post('/login', {
email: this.email,
password:this.password
});
console.log(response)
}
inside my console when logging it only returns an api key instead of a session id.
trying to dig around the postman docs to see if I can somehow use this key to get a session ID?
https://learning.postman.com/docs/sending-requests/authorization/#api-key
any help is greatly appreciated :)
I have a standard HTTPS Axios request from my Frontend (which is based on Vue), to the our company's API which is on another server(server use SSL sertificate).
testApi() {
axios.get('https://rng-hub2.staging.rng:8001/rng/3/')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});
},
Which cause an error like this:
In Firefox:
In Chrome the error looks like this:
As I was thinking, in browsed developing tools under tab of Netwerk -> Response, I should also see an error, which is true for Chrome, but eventyally is not true for Firefox.
So Chrome shows me:
But in the Firefox I receive my data in exactly right format:
Have any idea how I can retrieve this data correctly and assign it to the response variable in .then section?
About Cross-Origin Request Blocked error: API's server administrator told me, that he have added my IP to the CORS "trusted list". However I'm not sure, because according to this post: https://jonhilton.net/cross-origin-request-blocked/
in my Response Header I should receive an additional header with my local IP like:
Access-Control-Allow-Origin: http://192.168.32.44
But I'm not.
This proxy staff also didn't work:
How to deal with CORS error on Vue CLI 3?
Please give me hint what am I doing wrong
Found the solution. The problem was deeper then I thought. So short answer is: If you are working in local network, with different API servers, they might be certified with inner corporate CA (Certificate authority) to be able to communicate via HTTPS protocol. So what you need is, to ask from your server administrator to give you private_key with which you gonna sign all the request to a specific API. In guzzle its looks like this:
new GuzzleClient(['verify' => '/path/to/self-signed/cert.pem']);
I was using github API in Meteor but could not solved this issue:
This code tries to get the total number of traffic for a certain repo.
HTTP.call( 'GET', 'https://api.github.com/repos/hackmdio/hackmd/traffic/views',
{
headers:
{
'Content-Type':'application/json',
"Accept":"application/vnd.github.v3+json",
"User-Agent": "whales"
},
},
function( error, response ) {
if ( error ) {
console.log('---------------------------error occurred-----------------------------------')
console.log('---------------------------error occurred-----------------------------------')
console.log( error );
} else {
console.log('--------------------------data got it!!-------------------------------------')
console.log('--------------------------data got it!!-------------------------------------')
console.log(response);
}
});
Error:
{
"message": "If you would like to help us test the Repo Traffic API during its preview period, you must specify a custom media type in the 'Accept' header. Please see the docs for full details.",
"documentation_url": "https://developer.github.com/v3"
}
I searched for similar issues and added "Content-Type" and "Accept" but it's still not working.
I then tried doing this in Postman and also in terminal with the same headers but this error kept happening.
Thanks a lot.
You will need to add an Accept: application/vnd.github.spiderman-preview header to your request in order to access the Repo Traffic API whilst it is in preview form. From the API docs:
APIs for repository traffic are currently available for developers to preview. During the preview period, the APIs may change without advance notice. Please see the blog post for full details.
To access the API you must provide a custom media type in the Accept header:
application/vnd.github.spiderman-preview
The Commit Search API is currently available for developers to preview. During the preview period, the APIs may change without advance notice.
To access the API you must provide a custom media type in the Accept header:
Accept: application/vnd.github.cloak-preview
☝️This header is required.
check docs
To anyone who ends up on this page after googling why GitLab API has started throwing 415 when sending POST requests:
Make sure you pass the Content-Type: application/x-www-form-urlencoded header if you're sending stuff via post-data fields. Their docs never mention this b/c apparently many clients (like curl) do this automatically.