Getting CORS error when using variable in api call - vue.js

Good day.
When i do the following api call with axios it works just fine but when i try to use a variable in said api call i get a cors error. What am i doing wrong?
When i use it without a variable, this works just fine:
somecall({state}){
axiosB
.get("/lmao/10.0.0.190")
.then(res =>
state.response = res.data);
console.log(state.response)
}
When i use a variable to perform the api call, this gives me a CORS error:
somecall({state, ip}){
axiosB
.get("/lmao/", ip)
.then(res =>
state.response = res.data);
console.log(state.response)
}
The value i am trying to pass is 10.0.0.190 in this case.

Assuming you're using Vuex (are you?), the syntax should be:
somecall({state}, ip){
axiosB
.get("/lmao/" + ip)
.then(res =>
state.response = res.data);
console.log(state.response)
}
Note that the payload comes as a second argument after the deconstructed context, rather than together with it.
Or the problem may be with this line:
.get("/lmao/", ip)
and may need to be changed as above.

Related

Express Set Custom Parameter Query Starter

I'm using express to interact with discord's oauth2 api.
When I request a user oauth token the server responds with a url like:
http://localhost:3000/index#token_type=Bearer&access_token=tkn&expires_in=int
I'm trying to extract the parameters after the # as with discords api parameters start with # unlike others which start with a ?
Because it doesn't start with a question mark I am unable to use the req.params.x property.
I thought, "No big deal, ill just get the url and extract it myself" but every single url accessor in express removes string after #. This includes req.url and req.originalUrl which both return the file path.
So how can I get url parameters started by hashtags instead of question marks?
Or How can I get the full url with content after hashtags
I was able to solve this problem by setting a custom query parser. Code snippet below.
const app = express();
app.set('query parser', (query) => {
return query.split('&').map(item => {
const [key, value] = item.split('=');
return {
key,
value
}
});
});
app.get('/', (req, res) => {
console.log(req.originalUrl); // Full URL starting with file path
})

API GET request URL works on Brave/Chrome but not on fetch()

When I paste and search this url
https://api.openweathermap.org/data/2.5/forecast?lat=39.48923&lon=-0.4780256&appid=b11fc49d6b14456d6aacedc8d0153072
it makes the request just fine:
But then on my code, when I want to fetch it and save this json it turns out with "Network request failed":
I have only used fetch() with local urls and it always worked.
This is my code (you can use my api key I can generate a new one later):
GetClima() {
//fetch(`${this.state.api.url}lat=${this.props.latitudDestino}&lon=${this.props.longitudDestino}&appid=${this.state.api.key}`)
fetch("https://api.openweathermap.org/data/2.5/forecast?lat=39.48923&lon=-0.4780256&appid=b11fc49d6b14456d6aacedc8d0153072")
.then(res => res.json())
.then(res => {
this.setState({
dataClima: res
})
})
}
This is because your emulator/simulator isn't connected to the internet. I can see your Wi-Fi icon in the status bar saying that it isn't connected to the internet.
It clearly says Type Error: Network Request Failed. Make sure that you have configured your virtual device properly and check your internet connection.
Having that said, make sure that you catch the errors properly using .catch() or using try-catch block if you're using async-await

Axios has wrong URL only with 'heroku local web'

I've got a problem with axios and heroku. Maybe some short introduction before.
The problem with CORS has been solved and i my apps run on localhost and on herokuapp.com. The only thing which is currently not working is my app running with heroku local web.
For the backend call I using axios which is referencing my backend api from an environment file:
axios
.get(process.env.VUE_APP_ROOT_API + "/resource")
.then(response => (this.receipt = response.data));
}
.env.local:
VUE_APP_ROOT_API=http//:0.0.0.0:5002 #5002 is my backend
This produces the following wrong axios call:
GET http://0.0.0.0:5001/http//:0.0.0.0:5002/resource #5001 is my frontend
I cannot explain how this GET is generated. Printing out the request url with
axios.interceptors.request.use(request => {
console.log("Starting Request", request);
return request;
});
is showing the correct URL http//:0.0.0.0:5002/resource...
Any solutions?
This is embarassing, I had a type:
http:// instead of http//:
See: Quasar Axios request wrong URL (Double URL)

What is returned by Storage.get in AWS Amplify when the file doesn't exist?

I'm trying to use AWS Ampify and can't find a good reference. A guide, I can find, but not a reference. If I make a call to Storage.get, such as the code snippet below, and test.txt doesn't exist, what is returned?
Storage.get('test.txt')
.then(result => console.log(result))
.catch(err => console.log(err));
I'm finding that it returns a URL that results in a 404.
As of Amplify 0.4.7, the intended behaviour is to return a URL that results in a 404.
If you want to avoid the 404, you can check for the presence of the file using Storage.list(). Or you can attempt to pre-load the URL with some exception handling, before actually use it.
This seems like sub-optimal behaviour to me, especially with a framework like angular, so I've submitted a feature request.
I was trying to find out if the object exists in the bucket before creating a new one and this is how I did it, hope it helps.
//make a get request of the object you want calling it by it's name
await Storage.get("key")
.then((response) => { //The response is a url to the s3 object
fetch(response).then((result) => { //fetch the URL
if(result.status === 200) { //if the file exists
console.log("file exists in the bucket");
} else { //if the status is 403 or others, the s3 object doesn't exist
console.log("file doesnt exist")
}
});
})
.catch((err) => console.log(err));
NOTE:
My S3 Bucket permission is public read access. If you have differnt bucket permissions then this solution might not work for you.

AWS Amplify React Native, throwing 403 InvalidSignatureException when passing data to request

We create an API for authenticated identities only. so the only valid user can access it. the API is throwing 403 InvalidSignatureException whenever there is data in the body of any request.
we also tested the API on native Android. it is working fine with that.
our POST request code is the following,
API.post(apiName, path, {body:{key:value}}).then(response => {
consoloe.log(response);
}).catch(error => {
consoloe.log(error);
});
We have followed everything on GitHub and API gateway but not getting proper solution for it.
I also received the InvalidSignatureException.
I can't tell for sure what the issue is with your request, but I solved my problem by looking at the error response and figured out that my region was wrong (us_east_1 instead of us-east-1).
Try the following:
API.post(apiName, path, {body:{key:value}}).then(response => {
console.log(response);
}).catch(error => {
console.log(error.response); // <--
});
In my case the error.response was:
And under data.message the error was described
In my case I was just getting 403 with no message. After 30 mins I realised that my path variable was missing slash.