I have nextjs api route /api/auth/signout, it basically just clears the specific cookie and send json back.
The problem is, when I deploy project in Vercel, this particular API working first time properly(cookie cleared and giving 200 response) but later it's not working (cookie not cleared and giving 304 response).
I want to know, is there any way to avoid cache only for this route?
What's the best possible way to fix this problem?
You can configure Cache-Control header per API endpoint
https://nextjs.org/docs/api-reference/next.config.js/headers#cache-control
In your case, something like this might do the trick:
res.setHeader('Cache-Control', 'no-store')
Added this config on next.config.js
async headers() {
return [
{
source: '/api/<route-name>',
headers: [
{
key: 'Cache-Control',
value: 'no-store, max-age=0',
},
],
},
];
},
Related
I'm attempting to migrate from Strapi 3 -> 4
I've managed to restructure my folder structure to get the schema working for all my content types.
However, in v3 I had an extra policy on the user-permissions plugin the verified the users jwt token with auth0.
I took the v3 implementation from these docs.
I'm attempting to get it to apply the same logic in v4 and i'm a bit lost since the new docs don't seem fully up-to-date.
I'm adding a new policy in /src/extensions/users-permissions/strapi-server.js
Taken from the docs here
module.exports = (plugin) => {
plugin.policies["permissions"] = async (ctx) => {
let role;
console.log("IN HERE");
if (ctx.state.user) {
// request is already authenticated in a different way
return true;
}
// ... A bunch more logic
return false
}
return plugin
}
If I run yarn strapi policies:list then my 'permissions' policy is listed.
However, when trying to use that policy anywhere, I don't see my console log to see that it's being applied.
I've tried to specify that policy in the routes setup:
module.exports = {
routes: [
{
method: "GET",
path: "/addition-requests",
handler: "addition-request.find",
},
{
method: "GET",
path: "/addition-requests/:id",
handler: "addition-request.findOne",
},
{
method: "POST",
path: "/addition-requests",
config: {
policies: ["plugin::users-permissions.permissions"],
},
handler: "addition-request.create",
},
],
};
Is there anything obvious I'm missing?
And is there a way to apply a policy to every request that requires auth rather than specifying a policy on the route?
It appears from reading this comment it appears as though any request made to a Strapi endpoint that contains a Bearer token is treated like a request that requires auth.
That seems to be why the policy isn't being run as if I remove the Authorization header the policy does run. The question of how to execute a policy on an endpoint that requires auth still remains however.
It appears that the issue around being able to do custom validation on a users jwt is an issue that a few people are facing with v4 Strapi. See my topic on their forum.
I have a form that I built in Nuxt. I'm trying to submit it to an external API. The expected response is a JWT token.
async login() {
const res = await this.$axios.$post(`/api/token`, {
username: this.username,
password: this.password
}, this.headers )
console.log(res)
}
Trying to call the API directly gets me a CORS error, so I use proxy settings in my nuxt.confix.js.
...
modules: [
'#nuxtjs/axios',
'#nuxtjs/proxy'
],
axios: {
baseURL: '/',
proxy: true
},
proxy: {
'/api/': { target: 'https://<apiurl>.com/', changeOrigin: true }
},
...
Now when I check the network tab, it shows a 301 redirect, but the data that was sent in the post request gets thrown away, and it makes a get request to the API which returns a 405 error (because it's expecting a POST request with a data and not an empty GET request).
How can I make a POST request to an external API using NUXT? Is this an option at all?
I tried changing changeOrigin: false, and that seems to get rid of the issue, but it throws a 500 server error instead and an npm error that says
ERROR [HPM] Error occurred while proxying request localhost:3000/api/token to https://<apiurl>.com/ [ERR_TLS_CERT_ALTNAME_INVALID] (https://nodejs.org/api/errors.html#errors_common_system_errors)
Thank you
The problem is not how to send api to an external API ... the problem is in the external API it self ... make sure the external API has no credentials required to make any action ...
if you can make a request to https://jsonplaceholder.typicode.com/posts and get results that means there is no problems in your code ... cors erros in most cases are backend issue ... which means .. the backend developer who worked on it should fix it
I am going mental. So I have the code below. When I run it as is, I get
Access to XMLHttpRequest at 'URL' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
If I remove the CORS header I get the same error. I am not sure what I am doing wrong. I will tell you if I curl the URL it works fine. What am I missing here.
Also, I have tried this using both axios.get AND fetch so I am open to both solutions.
getRoomUserCount: function () {
return axios
.get('URL', {
responseType: "json",
});
},
What it SHOULD return is an array of data, then using the code below I grab the array
mounted: function () {
this.roomUserCount = this.getRoomUserCount();
},
CORS policy is ALWAYS server related. You cannot change anything on your client-side to change that.
Enable CORS on your server to fix this.
I've set up an SSR NuxtJS project using Vercel and I want to cache to Vercel Web Server the html page file for better performance and not just adding response headers for client/browser caching. So I want to cache (to be x-vercel-cache: HIT as here mentions) the GET request of each page with content-type: text/html; charset=utf-8.
Searching inside the Vercel Config I couldn't find anything related ...
I tried to add a package (nuxt-ssr-cache) for ssr cache inside the Nuxt project, but it didn't work as expected.
Any idea how could I achieve that ?!?
You need to set the headers of the response so the CDN can understand you want to cache the response. With Node.js (vanilla):
res.setHeader('Cache-control', 's-maxage=120, stale-while-revalidate);
With vercel.json:
{
"headers": [
{
"source": "/example/:path*",
"headers" : [
{
"key" : "Cache-Control",
"value" : "s-maxage=120, stale-while-revalidate"
}
]
}
]
}
You can read more about "vercel.json" in the Vercel documentation.
I have been trying to figure out how to get this Vue project to work with the Lyft API. I have been able to get an Auth Token successfully created from the three-legged procedure, but I am unable to get the available drive types https://api.lyft.com/v1/ridetypes endpoint from the localhost:8080. It does work on Postman.
It keeps stating:
Access to XMLHttpRequest at
'https://api.lyft.com/v1/ridetypes?lat=37.7752315&lng=-122.418075'
from origin 'http://localhost:8080' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
I had tried doing a proxy using a vue.config.js file:
module.exports = {
devServer: {
proxy: {
'/lyftapi': {
target: 'https://api.lyft.com/v1',
ws: true,
changeOrigin: true
}
}
}
}
I been around other parts of Stack Overflow, and this is the closest thing to my problem, but no answers.
CORS error in Lyft API started recently
Any suggestions?
Axios Get Call
axios.get('/ridetypes', {
baseURL: 'https://api.lyft.com/v1',
headers: {
'Authorization': this.lyftToken,
},
params: {
lat: lat.toString(),
lng: long.toString()
}
})
If it means anything, I am able to make successful GET calls to retrieve Uber products, but not so much the Auth Token (unless its from Postman).
Lyft-API has disabled CORS, this means that browsers will block calls to api.lyft.com.
Vue won't be able to do anyting about this as this is a browser security policy.
Luckily there is nothing from stoping you to make this call from your own server.
One solution is to forward the request and response using your own server. You make a call to your server, the server makes a call to lyft, waits for the response and then responds your request.
This is not a vue only solution.