# JSON from Url

**URL:** <https://talk.observablehq.com/t/json-from-url/1635>\
**Category:** Uncategorized\
**Created:** [February 1, 2019, 3:12pm UTC](https://talk.observablehq.com/t/json-from-url/1635 "2019-02-01T15:12:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![AskBid](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/askbid/32/1417_2.png) [@AskBid](https://talk.observablehq.com/u/AskBid)\
**Post date:** [February 1, 2019, 3:12pm UTC](https://talk.observablehq.com/t/json-from-url/1635/1 "2019-02-01T15:12:03Z")

</div>

> **[Trial](https://beta.observablehq.com/@askbid/trial)**
>
> An Observable notebook by askbid.

I don’t seem to find any explanation to why it fails to Fetch

thanks for any help

---

<div class="post-metadata">

**Author:** ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)\
**Post date:** [February 1, 2019, 3:30pm UTC](https://talk.observablehq.com/t/json-from-url/1635/2 "2019-02-01T15:30:01Z")

</div>

If you open your console (F12), you will see that there is a CORS error. It means that the remote server is not configured to allow [observablehq.com](http://observablehq.com) scripts to access its resources.  
A solution could be to pass through a proxy configured to allow cross-origin requests, or if you are managing the remote server, to configure the web server to allow them (see [https://enable-cors.org/](https://enable-cors.org/))

---

<div class="post-metadata">

**Author:** ![bumbeishvili](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bumbeishvili/32/4220_2.png) [@bumbeishvili](https://talk.observablehq.com/u/bumbeishvili)\
**Post date:** [February 2, 2019, 2:58am UTC](https://talk.observablehq.com/t/json-from-url/1635/3 "2019-02-02T02:58:31Z")

</div>

I think there are 3 problems:

1. As Severo mentioned - you have cors error
2. It’s mixed content - Observable is https, whereas your URL is HTTP, try it changing to https, I think Heroku already supports SSL
3. 503 (Service Unavailable) - If you had fixed above two, there is third one, server error

Shameless plug 🙂  
Take a look at my fetcher notebook - you can use one function `load` for data loading, it users `cors-anywhere` proxy, if it sees cors or HTTP problem, and data type is automatically determined from URL

> **[Fetcher usage](https://observablehq.com/@bumbeishvili/fetcher-usage)**
>
> This notebook in some cases, uses (cors-anywhere.herokuapp.com) proxy server , which is only provided so that you can easily and quickly try out CORS Anywhere So you may experience loading errors , when it's used too often! For the workaround, you...

---

<div class="post-metadata">

**Author:** ![AskBid](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/askbid/32/1417_2.png) [@AskBid](https://talk.observablehq.com/u/AskBid)\
**Post date:** [February 2, 2019, 11:21am UTC](https://talk.observablehq.com/t/json-from-url/1635/4 "2019-02-02T11:21:32Z")

</div>

probably the wrong forum but I tried to add CORS to the nginx.conf:

```
#user nobody;
worker_processes 1;

#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;

#pid logs/nginx.pid;

events {
    worker_connections 1024;
}

http {
    include mime.types;
    default_type application/octet-stream;

    #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
    # '$status $body_bytes_sent "$http_referer" '
    # '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log logs/access.log main;

    sendfile on;
    #tcp_nopush on;

    #keepalive_timeout 0;
    keepalive_timeout 65;

    #gzip on;
    #gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

    server {
        listen 80;
        server_name 52.56.73.140;

        #charset koi8-r;

        #access_log logs/host.access.log main;

        location / {
            root /var/www/html/;
            index index.html index.htm;
        }

        #error_page 404 /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root html;
        }

    }

    #HTTPS server
    
    server {
        listen 443 ssl;
        server_name localhost;

        #ssl_certificate cert.pem;
        #ssl_certificate_key cert.key;

        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout 5m;

        ssl_ciphers HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers on;
        #
        # Wide-open CORS config for nginx
        #
        location / {
             if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                #
                # Custom headers and headers various browsers *should* be OK with but aren't
                #
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                #
                # Tell client that this pre-flight info is valid for 20 days
                #
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
             }
             if ($request_method = 'POST') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
             }
             if ($request_method = 'GET') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
             }
        }
     }
}

```

obviously I am doing something wrong.

I have almost 0 knowledge of backend so if it is not easy as hoped I will have to leave it 🙂