Ask coding questions

← Back to all posts
Blocked by CORS policy: No 'Access-Control-Allow-Origin' header
RolandJLevy (649)

Hello,

I have made this Node / Express repl https://repl.it/@rjlevy/node-text-to-speech-endpoint that creates an endpoint to play audio which is generated using this Text-to-Speech API

This is the endpoint that generates the audio: https://node-text-to-speech-endpoint.rjlevy.repl.co/speak?b64=true you can test it out here

Here is an HTML repl that accesses the end point to play the audio file: https://repl.it/@rjlevy/html-audio-decode-base64

When I run the HTML repl is get this error about being blocked by CORS policy:

Access to audio at 'https://node-text-to-speech-endpoint.rjlevy.repl.co/speak?b64=true' from origin 'https://html-audio-decode-base64--rjlevy.repl.co' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

In the Node / Express application I am using the cors node package, like this:

const cors = require('cors');
app.use(cors());

Also, I am using this middleware but none of this has helped:

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

Can someone take a look and let me know what I’m doing wrong and how to fix the problem?

Many thanks,
Roland

Answered by fuzzyastrocat (1296) [earned 5 cycles]
View Answer
Commentshotnewtop
fuzzyastrocat (1296)

The easiest way to fix this (if you know the source is safe) is to just do https://cors-anywhere.herokuapp.com/[your-url-here]. So, you'd do https://cors-anywhere.herokuapp.com/https://node-text-to-speech-endpoint.rjlevy.repl.co/speak?b64=true instead of https://node-text-to-speech-endpoint.rjlevy.repl.co/speak?b64=true.

Coder100 has posted the proper fix, however I find it easier just to do it this way and be done with it (but remember, only do this with known, trusted sources).

RolandJLevy (649)

@fuzzyastrocat OMG, thank you! it works! here: https://repl.it/@rjlevy/html-audio-decode-base64

Why didn't this middleware work?

const cors = require('cors');
app.use(cors());

...and why didn't @Coder100's helpful solutions work? I tried them all and still got the same CORS error - so strange!

I've been stuck on this for 2 days, thanks so much.

And thank you @Coder100 for helping me too :D

fuzzyastrocat (1296)

@rjlevy Good question. I'd have to see more of the context and investigate more, CORS is a finicky thing.

As for Coder100's solution, same as above. Really not sure, in theory they look right but there was obviously something a little off.

Coder100 (11091)
app.use((req, res, next) => {
  res.append('Access-Control-Allow-Origin', '*');
  res.append('Access-Control-Allow-Headers', 'Content-Type');
  res.set('Access-Control-Expose-Headers', '*')
  next();
})

no libraries, just your favorite one, express :)

RolandJLevy (649)

Hi @Coder100, yes I love Express :) Thanks a lot for the middleware code. I've implemented it but I'm getting the same error:

Access to audio at 'https://node-text-to-speech-endpoint.rjlevy.repl.co/speak?b64=true' from origin 'https://html-audio-decode-base64--rjlevy.repl.co' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

and this new one:

GET https://node-text-to-speech-endpoint.rjlevy.repl.co/speak?b64=true net::ERR_FAILED

Any ideas on what the problem could be?

Many thanks,
Roland

Coder100 (11091)

hmm, is it ok if you send the repl? @rjlevy

Coder100 (11091)

make sure the header is present on both websites i think @rjlevy

RolandJLevy (649)

@Coder100 yes, sure. How do I send it to you?

Coder100 (11091)

ok thats really strange @rjlevy

Coder100 (11091)

im going to put this on my own hands and make an example repl to see if it works for me @rjlevy

Coder100 (11091)

@rjlevy

Mine works!! :D
Here's the repl

The code is using http, but I'm sure you can understand it (change setHeader to header):

Final Conclusion

I really hope this works for you:

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Expose-Headers', '*')
  next();
})

If it still doesn't work, read this

RolandJLevy (649)

@Coder100 yes, yours worked straight away: https://repl.it/@rjlevy/html-audio-decode-base64

But I even after adding the latest middleware you just gave me I still get the same error... very strange. I have removed the cors middleware I previously installed but still no joy!

I've read the article but nothing seems to work. Any other ideas? thanks again @Coder100!