From what I have learnt, CORS is a mechanism implemented on browsers to prevent web pages from making requests to another domain. But in this case, the next.js frontend (browser) is making requests to the next.js server itself (same domain), which in turn make requests to the WP backend (subdomain). So the browser is not directly making any requests to the wp subdomain, hence no errors. CORS is not applicable for server-to-server communication.

I had the same issue.. To solve it, simply go into the s3 bucket -> permissions -> scroll down to CORS section -> press edit -> paste the following: [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET", "POST", "PUT", "DELETE", "HEAD" ], "AllowedOrigins": [ "localhost:3000" ], "ExposeHeaders": [] } ]

Have you changed the fetch url to your wordpress installation url under lib/graphqlRequest.js? Otherwise fetch will fail because it is pointing to my wp url. If not, you can find the wp backup files in the repo, which you can use to install a copy of the wordpress site on your localhost or remote server. As you said, the typo - "getCatetory" - has nothing to do with the fetching issue since it is only the query name, which can be anything. Anyway, I have fixed it, thanks for pointing that out.

@@CodingReflections I tried running it with your URL and then changed it to mine, still fails. The error is always fetch related. The default Nextjs ISR WP blog template works and fetches properly, but doesn't have category archives that I'm trying to add EDIT: Works now! This is the error I was getting: Server Error Error: A required parameter (slug) was not provided as a string received undefined in getStaticPaths for /category/[slug] This error happened while generating the page. Any console logs will be displayed in the terminal window. This is what Github Copilot came up with and it fixed it: "In your getStaticPaths function, you're mapping over categories and for each category, you're returning an object with params that contains categoryName: category.slug. However, the error message suggests that the function is expecting a slug parameter, not a categoryName In this updated code, I've changed categoryName: category.slug to slug: category.slug to match the expected slug parameter." return { paths: categories.map((category) => ( { params: { slug: category.slug } } )), fallback: false, }

Where you able to complete yours??

I mean in your case it does make sense because you don't want to expose any of the keys but it would require less network if you were to create a presigned url from the server, send it to the client and let the client upload the file directly. what do you think?

I did it this way to keep the aws credentials safe on the server. Instead if it was on the client, won't it get exposed to the client, even if it is a predesigned url?

@@CodingReflections nah, thats the whole concept of presigned url. i think you should refer it, the current method which you are describing is just wasting double bandwidth.

@@impc-lx9gf what's the practical difference? you need to hit the server either way to either get the credentials or a pre-signed url.

@@milkboxshow1416 there is big difference between uploading file to server then s3 and just hiting server for s3, any way you must be not in production so that's why you will not get it either way. Thanks 😊

that would be amazing nextjs + woo commerce