SSL in yarn dev. https has been blocked by CORS policy

sage
,
1

hi
I use sage 10.1.6 on my local machine
with config

.proxy('https://mysite.test')
.serve('http://0.0.0.0:3000');

in browser console I get error

Access to script at 'https://mysite.test/wp-includes/js/wp-emoji-release.min.js?ver=5.9.2' 
from origin 'http://0.0.0.0:3000' has been blocked by CORS policy: 
The request client is not a secure context and the resource is in more-private address space `local`.

I try generate my ssl sert with
mkcert 0.0.0.0
then insert it in config

.proxy('https://mysite.test')
.serve('https://0.0.0.0:3000', {
      cert: 'ssl/local.pem',
      key: 'ssl/local-key.pem',
    });

Then in browser I get error
ERR_SSL_VERSION_OR_CIPHER_MISMATCH

please help

3

:thinking:

What’s your local development setup like? What OS/tools are you using for your webserver? Does mysite.test have a valid SSL cert that’s displaying a green padlock in your browser?

Can you try localhost instead of 0.0.0.0 without SSL?

.proxy('https://mysite.test')
.serve('http://localhost:3000');
4

I think you likely want the hostname to match your certificate.

Here is a config that should work:

app.setPath({
  "@certs": "/Users/[user]/Library/Application Support/mkcert"
})
.serve({
  host: "example.test",
  cert: app.path("@certs/localhost+5.pem"),
  key: app.path("@certs/localhost+5-key.pem"),
})

You could alternatively, or in tandem with the above config, also use mkcert to generate a certificate that works on 0.0.0.0 and example.test (went ahead and threw some other common local addresses on there as well):

mkcert -client example.test localhost 127.0.0.1 0.0.0.0 ::1

edit: The @certs part doesn’t do anything special with regards to certs, and it’s totally optional. I just find it to be a nice way to deal with having to reference them all the time. Even better is probably to set that path in .env.

2 Likes
5

.serve(‘http://localhost:3000’);
works good
I am Happy as a clam

2 Likes
7

@webspilka, can you please show your complete config?