"CORS header ‘Access-Control-Allow-Origin’ missing"

Configuration
1

Hello,

Im trying to request hass.io data via a GET Request, but I always get this error in the console
“CORS header ‘Access-Control-Allow-Origin’ missing”.

My configuration.yaml looks like this:

# HTTP and API config
api:

http:
  cors_allowed_origins: 
    - http://192.168.0.41
    - 192.168.0.41

My JavaScript to fetch the data looks like:

const url = 'http://192.168.0.33:8123/api/';


fetch(url, {
    credentials: 'include',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': token
    }
})
    .then(res => res.json())
    .then(data => console.log(data))

For the token I created a Long-Lived Access Token, which seems to work (tested with insomnia).

Can you help me pointing out whats the missing part here?

Thanks alot!

2

I tried setting up the auth_provider, but this didnt help.

Any ideas or hints, please :slight_smile: ?

3

If you use postman does the same thing happen? Usually this indicates whatever you are using to make the GET request is trying to do a preflight check. Which shouldn’t be required I do not think.

4

Thanks for your reply!

I tested the endpoint with my long lived token via curl and insomnia.
Both requests answered with 200, Reading data was no problem.

But that’s because those tools dont send preflight requests.

Do you have any idea how to configure this thing so my app can consume the data, too?

Thank you!

5

I just found this interesting link:

The problem: even this example doesn’t work.
For me, it only needs a long lived token, but this doens’t seem to be the case.
Is there ANY link which provides me some useful hints how to configure hass.io so I can fetch simple data via Rest API?

6

Unfortunately if you are trying to use a webapp to make the call from the browser I’m not sure there is not much you can do. Fetch, axios, and all of those things all make preflight requests from the browser anyway. I also don’t think home assistant should allow any other origins as it would create security vulnerabilities. You could possible make a backend service that makes a the call via a node services instead of from the browser.

7

I just found this https://www.home-assistant.io/integrations/http/#cors_allowed_origins there is an option to enable cors origins you want to allow. So you could conceivable enable the origin you want for your app. I didn’t realize this was an option as I don’t use it.

1 Like
8

Thank you :slight_smile:
As you can see in my initial post, I just used this option, without a success.

BUT when I checked the blocked request from my app, I just found that the origin in the request is my development server which is (surprise) localhost.

So, if you are going to run in this problem:
Add localhost to your cors_allowed_origin configuration OR whatever origin is set in the request. You can check this in the development tools of your browser, in the request header under the “network” tab.

Thank you!

3 Likes
9

FYI, I’m trying to build a standalone local web app and I ran into a similar issue. So just thought I’d point out something that I didn’t discover until after banging my head against the wall for hours. If you want to make use of the REST API be sure to add this line to your configuration.yaml file:

Screen Shot 2022-03-09 at 9.54.22 AM
Screen Shot 2022-03-09 at 9.54.22 AM1172×596 52.9 KB

It’s such an odd way to me to declare “yes, allow access to the api”.

2 Likes
10

Hello,

Sorry this is so old but I have been trying to get this to work today sadly I can’t

I’m using HA OS and trying to connect to the API with a development server (react app)

All on my local network so HA is on 192.168.0.X and then my laptop running the development server is on 192.168.0.186 as well

I have tried all sorts of stuff

http:
    cors_allowed_origins:
     - "*"
     - http://localhost:5173
     - http://192.168.1.186:5173
     - http://localhost
     - http://192.168.1.186
     - http://192.168.*

localhost, the IP of the dev PC, with and without the port etc.

I think I have followed the docs properly but nothing seems to be working, What more can I try?

I also have a Nabu Casa connection and that also doesn’t allow CORS

Thank you

  • Doug
11

buen dia ,

ponte algo asi : ami me funciono

# Example configuration.yaml entry
http:
  server_port: 2888
  
  cors_allowed_origins:
    - http://localhost:2888/tuformulario

api:

12

gracias , me sirvió para que me funcionara

13

ok and where can I enable CORS?

14

CORS from configuration are not working, am I missing something?

This is my error:
Access to image at 'http://192.168.188.1:49000/FRITZ-Logo-120x120.png' from origin 'http://1nuc.mooo.com:20536' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space private.

I am accessing my HA with hostname not IP, with local IP all is working. I tried this in Media section DLNA Servers.

15

Were you able to figure this out?