I am trying to intercept POST requests using a serviceworker with Workbox. However the route does not seem to register. When online the request just goes through and nothing is logged. When offline the console logges an net::ERR_INTERNET_DISCONNECTED error. The request also does not seem to fall into the catchHandler.
service-worker.js
registerRoute(
({url}) => url.pathname.endsWith('detailScreen'),
({request, url}) => {
console.log('POST', request, url)
},
'POST')
setCatchHandler(async options => {
console.log(options.request, options.url)
return Response.error();
})
request:
https://test.com/admin/crm/relation/detailScreen
Related
Actually, I'm sending a post request to save the templates. It is working fine if I send the post request on Local. But if i make a build and send a post request it is not allowing me to send post request and instead showing me get request in network.
The static urls below are working fine.
const response = await axios.post('https://applicationname/api/template', {
template_json: templateJson,
name: name,
type: refinedJson.type,
ImageBase64: await image
}).catch((error) => {
localStorage.setItem('Save-temp', error.response.data.message)
showToastError()
localStorage.removeItem('Save-temp')
toggleFaq(true)
});
The one which causes errors:
const response = await axios.post('/api/template', {
template_json: templateJson,
name: name,
type: refinedJson.type,
ImageBase64: await image
}).catch((error) => {
localStorage.setItem('Save-temp', error.response.data.message)
showToastError()
localStorage.removeItem('Save-temp')
toggleFaq(true)
});
.env
APP_URL= http://localhost
lately we are facing an issue that our Spring Boot backend service (stateless REST service) SOMETIMES returns an HTTP 401 (Unauthorized) error when users try to upload files >70 MB (or in other words, when the request takes longer than just a couple of seconds). This does not occur consistently and only happens sometimes (~every second or third attempt).
The www-authenticate header contains the following in these cases:
Bearer realm="test", error "invalid_token", error_description="Token is not active"
Our Spring (Boot) configuration is simple:
keycloak.auth-server-url=${KEYCLOAK_URL:http://keycloak:8080/auth}
keycloak.realm=${KEYCLOAK_REALM:test}
keycloak.resource=${KEYCLOAK_CLIENT:test}
keycloak.cors=true
keycloak.bearer-only=true
Essentially, our frontend code uses keycloak-js and does the following to keep the access token fresh:
setInterval(() => {
// updates the token if it expires within the next 5s
this.keycloak.updateToken(5).then((refreshed) => {
console.log('Access token updated:', refreshed)
if (refreshed) {
store.commit(AuthMutationTypes.SET_TOKEN, this.keycloak.token);
}
}).catch(() => {
console.log('Failed to refresh token');
});
}, 300);
Further, we use Axios and a respective request filter to inject the current token:
axios.interceptors.request.use(
(request: AxiosRequestConfig) => {
if (store.getters.isAuthenticated) {
request.headers.Authorization = 'Bearer ' + store.getters.token;
}
return request;
}
);
This worked very well so far and we have never experienced such a thing for our usual GETs/POSTs/PUTs etc. This happens only when users try to upload files larger than (around) 70MBish.
Any hint or tip how to debug this any further? We appreciate any help...
Cheers
I have laravel-vue application and one of my functions is running on post request but strange is that I get GET request error:
The GET method is not supported for this route. Supported methods: POST.
code
Route
Route::post('distanceCost', 'Api\Front\CartController#distanceCost');
Component
sendShippingRequest() {
// post request
axios.post('/api/distanceCost/', this.form, {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('access_token')
}
})
.then(response => {
//....
})
.catch((error) => {
console.log('error', error);
});
}
Any idea?
The problem is, that in response to a POST to /api/distanceCost/, Laravel will respond with a redirect to /api/distanceCost. Your browser will then send a request to /api/distanceCost, but this time, it will use GET and it will not send the post payload. This is why your server replies with an error code.
I am using Nuxtjs and built-in Vuex modules along with Nuxtjs's official axios. I'm trying to GET from my local server and it always throw CORS error.
So I made an API call to Github's public endpoint, and unsuccessfully only getting CORS error in my console.
I'm using Store actions to launch AJAX calls to server on component create lifecycle. Here is my code.
// component.vue
created () {
this.$store.dispatch('getGithubAPI')
}
// store action
async getGithubAPI ({ commit, state }) {
await this.$axios.$get('https://api.github.com/users/kaungmyatlwin', { headers: { 'Access-Control-Allow-Origin': '*' } })
.then(resp => {
console.log(resp.data)
})
}
Still no luck of getting it. Here is an error message that was thrown to console.
Failed to load https://api.github.com/users/kaungmyatlwin: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
What did I do wrong here? Or is it an error residing in async/await?
UPDATE: Strange thing is that the network call actually goes out and fetch data from server, as it can be seen in Network console from Chrome.
Ok I seem to have figured out this problem.
In nuxt.config.js, you have to put credentials: false to allow CORS wildcard.
My axios config here.
axios: {
baseURL: 'https://api.github.com',
proxyHeaders: false,
credentials: false
}
Reference: https://github.com/nuxt-community/axios-module#credentials
I'm using the following lua script to forward all server responses that are served from Node. My error handling for a /signup route works as follows:
if authenticationResult.status ~= 201 then
...
ngx.status = authenticationResult.status
ngx.say(authenticationResult.body)
ngx.exit(401)
return
end
From the client I send a typical signup request like so, using the superagent-promise library:
request
.post(url)
.type('form')
.send(data)
.end()
.then((response) => {
console.log('the response', response)
})
.catch((error) => {
console.log('the error', error)
})
When I send a valid post request from the client, the response variable in the .then successfully contains the response body.
However, when I sent an improper post request with invalid credentials, neither the .then nor the .catch executes. Instead, the Chrome console immediately displays POST http://api.dockerhost/signup 401 (Unauthorized).
I would like to know what I can do differently to successfully access the server's error response and its contents, outside of just its status code.
Per the manual, you need to use ngx.HTTP_OK as the return if you want nginx to return content as part of the page. Otherwise it will simply return a 401.
ngx.status = authenticationResult.status
ngx.say(authenticationResult.body)
ngx.exit(ngx.HTTP_OK)
return