Vvv: Font from origin domain.dev has been blocked... (CORS and browsersync)

[jb510]

Browersync (run via gulp) is using localhost:3000 which works great except for Fonts and SVGs hover trigger cross site scripting protection.

Font from origin 'http://sitename.dev' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

The browser URL is localhost:3000 for gulp-browsersync, but the XML assets are getting loaded from http://sitename.dev/ I get, that just have no idea how to get it working.

I thought this should work: https://gist.github.com/Stanback/7145487 and tried adding to nginx-wp-common.conf and alternatively sitename.conf. Neither worked however.

Maybe I'm going about this all wrong? Either advise on how to allow localhost:3000 to load from *.dev, or an alternative way of using browsersync would be appreciated here.

[jb510]

After much trial and error I got this working, I'm not really happy with the way it's working, maybe someone can still clarify or suggest alternatives.

to: /etc/nginx/nginx-wp-common.conf
after the first location block I added:

location ~* \.(eot|ttf|woff|svg)$ {
    add_header Access-Control-Allow-Origin *;
}

This _is_ the file referenced by the individual conf files:
/srv/config/nginx-config/sites/{site_name}.conf

Confusion:
There is a file adjacent to the individual conf files here:
/srv/config/nginx-config/nginx-wp-config.conf which apparently does nothing.

Is deliberate or a bug?

[jeremyfelt]

Not entirely deliberate, though not a bug either. :) Need to think through the consequences of adding Access-Control-Allow-Origin by default. It may be fine, especially because of the local setup, but it might be best left as is.

[jb510]

I would think adding allowing "localhost" by default would be sufficient, rather than "*", but I don't know if the port is going to matter (pretty naive when it comes to nginx config)

[johnpuddephatt]

thanks @jb510 ... your post saved me from the same trial and error!

[jb510]

Glad it helped :D

[heyfletch]

Thanks @jb510, fixed it for me, too.

[CrearPaginaWeb]

Worked for me in Crear Página Web | WebArt.es

# Allow access from all domains for webfonts.
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

I've put this code in .htaccess file and website works 100% fine for me...

Greetings from Barcelona!

[arnisjuraga]

Also woff2 :
ttf|ttc|otf|eot|woff|woff2|font.css|css

[tomjn]

Marking as closed due to inactivity, PR welcome if this is still an issue

[miladbinyaz]

thanlk all
thats work for me .

# Allow access from all domains for webfonts. <IfModule mod_headers.c> <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch> </IfModule>

[tomjn]

@miladbinyaz that's an Apache HTAccess rule, VVV uses Nginx

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.