webdav-client: CORS-header ‘Access-Control-Allow-Origin’ missing (Nextcloud)

Just tried to follow the guide in the readme.md to connect to a nextcloud server. The code is

var client = Webdav(
   "https://some.nextcloudserver.nl/remote.php/webdav",
   "username"
);
client
   .getDirectoryContents("/", { withCredentials: true })
   .then(function(contents) {
     console.log(JSON.stringify(contents, undefined, 4));
   });

But when it executes the console reports ‘CORS-header ‘Access-Control-Allow-Origin’ missing’.

More information: using a standard empty VueJS project template with webdav version 1.6.1, on http://localhost:8080 and the nextcloud server is a remote server. Not sure if this is expected behaviour or not, since the example in the readme.md is doing exactly the same.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 19 (9 by maintainers)

Most upvoted comments

So I actually managed to get this stuff working.

When setting up the whole stuff it is very important to configure the .htaccess file of the hosting. You will see a line with the following text: “#### DO NOT CHANGE ANYTHING ABOVE THIS LINE ####”. All the changes below are the changes I made above that line. The main thing you have to do is edit: <IfModule mod_env.c>

<IfModule mod_env.c>
    Header set X-Content-Type-Options "nosniff"
    Header set X-XSS-Protection "1; mode=block"
    # Add security and privacy related headers
    Header always set Access-Control-Max-Age 1728000
    SetEnvIf Origin "http(s)?://(www.mywebsite.com|localhost:8080)$" AccessControlAllowOrigin=$0
    Header always set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT,PROPFIND"
    Header always set Access-Control-Allow-Headers: "Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization, X-CSRF-Token, Depth, OCS-AP$"
    Header always set Access-Control-Allow-Credentials true
    SetEnv modHeadersAvailable true

    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]
<IfModule>

As you see here you can replace the part with your own website (and add additional websites by using | as a seperator):

SetEnvIf Origin "http(s)?://(www.mywebsite.com|localhost:8080)$" AccessControlAllowOrigin=$0

I have added localhost:8080 as I am working with Vue on my website. This is highly discouraged and should be removed once the website is deployed.

Now follow the tutorial as given on the README:

In case you are getting a PROPFIND 405 error, this is most likely the solution:

.getDirectoryContents("remote.php/dav/files/...") instead of .getDirectoryContents("/")

It could be that I forgot a few changes in the .htaccess file, so in case it does not work out and you are still getting CORS errors just ping me.

aliyss on Dec 9, 2020

In case you are getting a PROPFIND 405 error, this is most likely the solution: .getDirectoryContents("remote.php/dav/files/...") instead of .getDirectoryContents("/")

This should have nothing to do with CORS, as these paths are appended to the host passed in during the factory creation… The two examples you gave are not equivalent. The host should include the remote.php/dav/files/ in your example. So if your domain is example.com, your full connection URL should be https://example.com/remote.php/dav/files/.

perry-mitchell on May 28, 2019