Cors Error even after changing buildout file : Volto

Locally when I run Plone[:8080] and Volto(yarn start)[:3000] it works fine. Now when I try running Volto in production mode (yarn start:prod), I read that it does not use internal proxy.
Now my plone buildout already has http://localhost:3000 as allow origin still in browser it displays Cors Error (No 'Access-Control-Allow-Origin' header is present on the requested resource )

  <plone:CORSPolicy
    allow_origin="http://localhost:3000,http://127.0.0.1:3000"
    allow_methods="DELETE,GET,OPTIONS,PATCH,POST,PUT"
    allow_credentials="true"
    expose_headers="Content-Length,X-My-Header"
    allow_headers="Accept,Authorization,Content-Type,X-Custom-Header,Origin"
    max_age="3600"
    />

My buildout file is https://github.com/plone/volto/blob/master/api/buildout.cfg#L24

PS: Plone version 5.2.4 Volto - 12.5.0

You may find these notes helpful:

I have the exact same cors setting and it does not work, I guess it works for you as you did yarn start, which creates a proxy to ur api, if you do yarn start:prod then this error comes.

This is possibly the case.

Yeah but I need to run Volto in production

Maybe this page can help? Simple deployment - Volto Developer Documentation

There's one idea to keep in mind: in production mode the API_PATH variables are "hardcoded" in the generated js file, so you should generate the bundle with the proper environment variable already set. You could inspect the generated js file (search for API_PATH) to see what is there (or change the code to print config.settings.API_PATH and it's companions). See volto/index.js at master · plone/volto · GitHub

I followed this only, still getting Cors.
My buildout file is this -
https://github.com/plone/volto/blob/master/api/buildout.cfg

To check if I am hitting wrong URL, Allow CORS: Access-Control-Allow-Origin - Chrome Web Store I tried using this extension and it worked fine. Even after setting allow_origin="*" I am getting Cors Error.

I am stuck on this for a while, is this some bug of Plone 5.2.4, or any idea where I might have gone wrong.

Steps used to start Plone
bin/instace fg -> starts on :8080

For volto I installed using npm init yo @plone/volto
then
PORT=3000 RAZZLE_API_PATH=http://localhost:8080/Plone yarn build
yarn start:prod

I followed the instructions exactly still getting the error.

As a hack I also tried to reverse proxy the same
backend /api
frontend /

<VirtualHost *:80>
        ProxyPass /api http://localhost:8080/
        ProxyPass / http://localhost:3000/
</VirtualHost>

Then while building I set RAZZLE_API_PATH appropriately, It worked fine, but the links were broken. For eg. say a link localhost/projects it goes to localhost/localhost:8080/projects. Do I need to change anything else for it to work.

I also tried using

docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e ADDONS="kitconcept.volto" -e ZCML="kitconcept.volto.cors" -e PROFILES="kitconcept.volto:default-homepage" plone

for backend to test - as was given in dockerhub page

still yarn start:prod did not work

I assume you want to mimic a deployment on your local machine.

What I do in my local dev batou environment to set up http://voltodeployment.example.com/ is this:

<VirtualHost *:80>
    ServerName voltodeployment.example.com
    ServerAdmin webmaster@foo.ch
    DocumentRoot "/Users/someone/Sites/"
    ErrorLog "/Users/someone/log/apache2/voltodeployment.example.com.error.log"
    CustomLog "/Users/someone/log/apache2/voltodeployment.example.com.access.log" common
    RewriteEngine On
    # API
    RewriteRule ^/api/(.*) \
    http://localhost:8080/VirtualHostBase/http/voltodeployment.example.com:80/Plone/VirtualHostRoot/_vh_api/$1 [L,P]
    # app
    RewriteRule ^(.*)      http://localhost:3000/$1 [L,P]
</VirtualHost>

In buildout.cfg:

[instance1]
recipe = plone.recipe.zope2instance
…
zcml-additional =
  <configure xmlns="http://namespaces.zope.org/zope"
             xmlns:plone="http://namespaces.plone.org/plone">
  <plone:CORSPolicy
    allow_origin="http://localhost:3000,http://127.0.0.1:3000,http://localhost:10001,*.example.com"
    allow_methods="DELETE,GET,OPTIONS,PATCH,POST,PUT"
    allow_credentials="true"
    expose_headers="Content-Length,X-My-Header"
    allow_headers="Accept,Authorization,Content-Type,X-Custom-Header,Origin"
    max_age="3600"
    />
  </configure>

Run a production build:

PORT=3000 RAZZLE_API_PATH=http://voltodeployment.example.com/api/ yarn build

Start Volto in production mode:

yarn start:prod
1 Like

Plone Foundation Code of Conduct