docs: add how-to for Handling CORS Issues with Static Assets (#40)

* docs: cors.md document added

* chore: cors.md formatted

* chore: refocus content and snippets

* docs: update installation steps to reference cors.md

---------

Co-authored-by: Dovid Levine <david@axepress.dev>

Author: SH4LIN

docs/cors.md

@@ -0,0 +1,86 @@
+# Handling CORS Issues with Static Assets
+
+## Overview
+
+When running a headless frontend on a different domain than your WordPress site, you may encounter [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues with static assets served directly from the WordPress server.
+
+By default, browsers block requests to resources from a different origin unless explicitly allowed.
+
+Built-in WordPress hooks and 3rd-party plugins such as [WPGraphQL CORS](https://github.com/funkhaus/wp-graphql-cors) or [WPGraphQL Headless Login](https://github.com/axewp/wp-graphql-headless-login) can help set proper `Access-Control-*` headers for requests generated _via_ WordPress, but loading assets such as images, fonts, and other static files accessed directly from the server may require manual configuration.
+
+## Local Development
+
+For local development, the easiest thing to do is to use a browser extension to disable CORS restrictions (e.g., a Chrome extension).
+
+However, while this is a quick fix for development, it is not a viable solution for production. Instead, you should configure your web server to include the necessary CORS headers.
+
+## Configuring CORS Headers on Server Assets
+
+To resolve CORS issues in a production environment, configure your web server to include the necessary CORS headers. Below are configurations for **Nginx** and **Apache**.
+
+### Apache
+
+If using Apache, add the following configuration to your `.htaccess` file or Apache configuration:
+
+```apacheconf
+<FilesMatch "\.(js|css|woff2?|ttf|eot|svg|gif|jpg|jpeg|png|ico|webp)$">
+    Header always set Access-Control-Allow-Origin "https://example.com" # Replace example.com with the frontend domain.
+</FilesMatch>
+```
+
+After updating the configuration, reload Apache. E.g.,
+
+```sh
+sudo systemctl reload apache2
+```
+
+### Nginx
+
+Add the following configuration to your Nginx server block to allow CORS for static assets:
+
+```nginx
+location ~* \.(js|css|woff2?|ttf|eot|svg|gif|jpg|jpeg|png|ico|webp)$ {
+	set $cors_origin "";
+
+	if ($http_origin ~* "^https?://(www\.)?example\.com$") {  # Replace example.com with the frontend domain
+		set $cors_origin $http_origin;
+	}
+
+	add_header 'Access-Control-Allow-Origin' "$cors_origin";
+}
+```
+
+After updating the configuration, reload Nginx. E.g.,
+
+```sh
+sudo systemctl reload nginx
+```
+
+## Using SnapWP CORS Middleware
+
+To further mitigate CORS issues, SnapWP includes a CORS middleware that proxies requests for script modules to the WordPress server. This bypasses CORS restrictions by routing requests through the Next.js server.
+
+### Enabling the CORS Middleware
+
+To enable the CORS proxy feature, update your `snapwp.config.mjs` file:
+
+```javascript
+/** @type {import('@snapwp/core/config').SnapWPConfig} */
+const config = {
+	// Other configuration options
+	useCorsProxy: true,
+};
+
+export default config;
+```
+
+### Customizing the Proxy Prefix
+
+By default, the proxy prefix is set to `/proxy`. If needed, you can override this by specifying `corsProxyPrefix` in the configuration.
+
+```javascript
+const config = {
+	useCorsProxy: process.env.NODE_ENV !== 'production', // Enable CORS proxy in nonproduction environments.
+	corsProxyPrefix: '/custom-proxy', // Optional custom prefix
+};
+```

docs/getting-started.md

@@ -20,13 +20,13 @@ This guide will walk you through setting up a headless WordPress app using SnapW
     wp plugin install wp-graphql https://github.com/wpengine/wp-graphql-content-blocks/releases/latest/download/wp-graphql-content-blocks.zip https://github.com/rtCamp/snapwp-helper/releases/latest/download/snapwp-helper.zip --activate
     ```
 
-2. (Optional) If you are faced with CORS issues during local development you may want to install activate the [`Allow CORS: Access-Control-Allow-Origin` Chrome Extension](https://chromewebstore.google.com/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf) or similar.
+2. (Optional) If you're running your WordPress site on a different domain than your frontend, you may need to [configure CORS headers](./cors.md).
 
 ## Frontend Setup
 
 ### Prerequisites
 
--   **Node.js**: v20+ (with `npm and `npx` installed).
+-   **Node.js**: v20+ (with `npm` and `npx` installed).
 -   **A WordPress backend** [configured with SnapWP Helper](#backend-setup).
 
 ### Installation Steps
@@ -75,19 +75,19 @@ To create a new headless WordPress app using SnapWP, follow these steps:
 
 @todo
 
-## **Additional Resources [Reference]**
+## Additional Resources
 
 This section contains a list of curated resources for developers working with headless WordPress, WPGraphQL, and some of the technologies used in the SnapWP stack.
 
-### **WPGraphQL**
+### WPGraphQL
 
 -   **Docs**: [https://www.wpgraphql.com/docs/introduction](https://www.wpgraphql.com/docs/introduction)
 -   **Official Discord Community**: [https://wpgraphql.com/discord/](https://wpgraphql.com/community/)
 
-### **Next.js**
+### Next.js
 
 -   **Docs**: [https://nextjs.org/docs](https://nextjs.org/docs)
 
-### **TypeScript**
+### TypeScript
 
 -   **Docs**: [https://www.typescriptlang.org/docs/](https://www.typescriptlang.org/docs/)