I am running into a strange issue with What I believe to be IIS related. I have developed an ASP.NET Web API running on DOTNET4.6. This API receives a json payload in its body when it is called from a different system. It then takes that information and calls the GitHub API at api.github.com with a personal access token in order to create a repository for me.
The outline above might be irrelevant to the situation but here is the problem:
Problem
When running in debug mode, this API works as expected. I can do postman POST request and all operations are completed as expected and I can see my new repo on GitHub.
When publishing the service and moving it to one of our IIS servers. Thing start to get messy and annoying. Doing a POST request results in a json response {"message":"An error has occurred"}. I know for a fact that this happens before my code is even reached and these are not one of my error handling messages. The response is a 500 Internal Server Error.
What I have tried
I tried investigating the source of the issue bu running the request in different ways. IIS logs give me nothing.
I ran the following request in the Chrome Developer console:
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({"timestamp":1589452400243,"webhookEvent":"item_created"});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch("https://myiisserver/Integration/api/GitRepoSetu?clientid=aclientid&clientsecret=aclientsecret", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
unfortunately, this yields the same result and there is no useful information whatsoever. only a 500 internal server an a message stating "An error has occurred"
can anybody point me in the right direction as to where I can look to find an indication of what is actually going on? Previously, I had CORS policy issues and attempted to resolve them by installing the CORS NuGet package and configuring it on my Controller. The cors error were only thrown in the chrome dev console and never in postman. I am at my witts end trying to figure this out.
Related
I'm trying to configure AppCheck in my web app (using SvelteKit).
I've registered my web app with recaptcha and then Added this basic code:
onMount(async () => {
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('my-key'),
isTokenAutoRefreshEnabled: true
})
})
But it fails with 400 error. Those occur because the POST request has 'unknown' where the Recaptcha (and firebase collection) should be.
POST URL: https://content-firebaseappcheck.googleapis.com/v1/projects/undefined/apps/undefined:exchangeRecaptchaV3Token?key=undefined
Why does it happen? how can I fix it?
*The only similar case is here, but it has no solution, and might not be the same.
SOLVED: The request was malformed due to mistaken firebaseConfig data.
I am seeing the following errors in the console of my PWA:
The FetchEvent for "https://static.cloudflareinsights.com/beacon.min.js" resulted in a network error response: the promise was rejected.
The FetchEvent for "https://www.google-analytics.com/analytics.js" resulted in a network error response: the promise was rejected.
It seems that external scripts have problems being fetched by workbox? The website is a next.js app and i am using next-pwa to turn it into a PWA. Here is the pwa-config for next-pwa: next-pwa config
Does anyone know how to fix this?
This is fairly common if you have a ad/tracking blocker extension installed, or if your browser has built-in blocking. A Workbox-powered service worker will not do anything to work around this blocking.
I have a middleware page on a route that first makes a check against the backend server.
In that middleware I'm trying to call a next.js api page using the fetch API, which in turn communicates with the backend. This flow works as expected in the local development environment, but when deployed to vercel, this fails.
The caught error displayed in vercel is: TypeError: Fetch API cannot load: /api/make-check-at-backend/].
The URL used is a relative path: fetch("/api/make-check-at-backend/", ...).
What is the issue there? Do I need to include the fully qualified URL value where the next.js app is hosted, including domain, protocol, etc? If that's the case, how can the server/host name be retrieved from Vercel? Should I use env variables?
This is the fetch code used in the middleware:
const retrievedValue = await fetch("/api/make-check-at-backend/", {
method: "POST",
headers: headers,
body: JSON.stringify({ someKey: 'someValue' }),
});
P.S. I've also tried using axios to make the http call directly to the backend, but this failed with an axios adapter known issue. This same backend call works as expected from any api/* page. Is all this due to middleware functionality being still in Beta?
Turns out that the Vercel setup has a number of system environment variables which are available in their corresponding deployed sites.
From my experience, in those deployed sites, the fetch API needs to have the full URL, including protocol, host, pathname, etc.
After some trial and error, I have found the code that works in the deployed sites is:
const retrievedValue = await fetch(`https://${process.env.VERCEL_URL}/api/make-check-at-backend/`, {
method: "POST",
headers: headers,
body: JSON.stringify({ someKey: 'someValue' }),
});
Below follows a screenshot of the Vercel's environment variables documentaiton, in case the link above becomes broken over time.
I have implemented Firebase storage put method to my nextJs App in order to upload pictures on Firebase Storage.
When I tested this method on my localhost, it worked like a charm but when i came to production, Firebase returned me a non verbose error :
"the server responded with a status of 405 ()"
or " cannot post 405' " on my Antd Design graphic Library
the weirdest is that response is irregular.
From the form url, it always respond this 405 error but if i try from the form component mounted in another url, it works, and in another context, sometimes it works sometimes it doesn't.
It is very hard to understand what happen and I can't find any lead on the Internet.
My NextJs App is hosted on Vercel Server and I guess all is well set up, authentication work for example but I did not try to access RTDB or Firestore.
This error is intermittent so I could imagine that is not a CORS Problem, neither a token access problem, because I tried without token access and I got an explicit error.
Thank you truly to dedicate some of your time to help me figure it out.
Have a nice day.
Example of my very "classic" method from Firebase documentation :
firebaseApp
.storage()
.ref(`pictures/${file.name}`)
.put(file.originFileObj)
.then(() => {
console.log("Picture uploaded")
})
.catch((err) => {
console.log(err.message);
});
I want to send a test donation from my fronted web app. For this i use:
STREAMLABS API docs.
Vue v2.5.17 component with template:
<template>
<layout>
<h1>Dashboard</h1>
<p><label for="donationSum">Sum</label></p>
<p><input type="number" id="donationSum" v-model="amount"></p>
<button #click="makeDonation">DONATE</button>
</layout>
</template>
'makeDonation' is mapped action from Vuex:
makeDonation ({ getters }) {
const url = 'https://streamlabs.com/api/v1.0/donations'
const postData = JSON.stringify({
name: 'TEST',
identifier: 'TEST',
amount: 100.00,
currency: 'RUB',
access_token: getters.streamlabsAccessToken
})
axios.post(url, postData)
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
console.log(error.response)
})
}
I am absolutely sure that I have the valid access_token, but I get an error 400:
POST https://streamlabs.com/api/v1.0/donations 400
{...}
POST https://streamlabs.com/api/v1.0/donations 400
{...}
Access to XMLHttpRequest at 'https://streamlabs.com/api/v1.0/donations' from
origin 'http://192.168.39.27:8080' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested resource.
Error: Network Error
at createError (createError.js?2d83:16)
at XMLHttpRequest.handleError (xhr.js?b50d:87)
undefined
This is normal server behavior. If something is wrong in the request, it gives 400 or 401 error, but there is a problem.
I can not get access to the body of the error, to understand what is wrong. Axios error.response is undefind and error has no useful information.
Screenshots:
Google Chrome 71.0.3578.80 x64 console log
Google Chrome 71.0.3578.80 x64 request details
Meanwhile Postman with the same postData makes a valid request and returns 200 response. If I corrupt the request (delete the access_token, for example), then it returns informative error:
{
"error": "invalid_request",
"error_description": "The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed. Check the \"access token\" parameter."
}
The big question: how do I get access to the body of the error that the STREAMLABS server returns?
I'm fairly certain that the error you're experiencing doesn't have anything to do with Axios or Vue. The reason the request is failing is that you're making it inside a browser: Browsers, at least nowadays, have pretty strict rules on what requests they allow and what requests they block.
I can not get access to the body of the error, to understand what is wrong. Axios error.response is undefined and error has no useful information.
That's because your browser is not allowed to show this information to you (or, to be more precise, the script you wrote). That's because of CORS. CORS makes sure that scripts can only interact with things that reside on their origin (the domain they're coming from) or sites that explicitly allow resource sharing (the RS in CORS). Streamlabs has simply not configured resource sharing for their API (I'll get to why in a second).
So why does your request work in Postman? Because Postman isn't a browser and doesn't care about CORS. Does that mean you can't use the Streamlabs API in your app? Not necessarily, you just have to do it on the server side because your server isn't a browser. This also has the benefit that you don't expose your access token to your users (which might be the reason why Streamlabs has not configured RS).