Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS also relies on a mechanism by which browsers make a "preflight" request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.
https://domain-a.com uses XMLHttpRequest to make a request for
Plone has a way to configure the CORS headers in order to allow domains to access it.
However, the recommendation is that you forget that CORS exists and "play well" to avoid the scenario where configuring and enabling CORS headers is the way to proceed.
These scenarios are:
Our frontend and backend are in the same domain (thus, avoiding the cross-domain issue), or
Using the internal proxy provided by Volto's NodeJS SSR server
During development, the last one is the one you are going to use.
The default backend will live in
http://localhost:8080/Plone and the frontend in
http://localhost:3000. If your Plone site is not named
Plone (so its url is something like
http://localhost:8080/mysite, you can still use Seamless mode by creating a file called
.env.development in the Volto project root with something like this:
In production, you'll probably will be using Volto's Seamless mode, so you won't be defining any custom
API_PATH but using
++api++ traversal, and reverse proxying it through your webserver.