Json-server: CORS for static files

[danielkiedrowski]

Hello,
requesting data from the JSON DB returns a "Access-Control-Allow-Origin" header entry, when I send an "Origin" header entry with my request. But when I request static files from my "public" folder, no "Access-Control-Allow-Origin" is ever set.

Is this a bug or a feature?

Best
Daniel

[typicode]

Hi Daniel,

Thanks for the issue. I'd say it's neither one nor the other.
Actually, never thought about enabling CORS on static files.

Does it create any issues for you?

Best

[danielkiedrowski]

Thanks for the fast reply.

Yes it does, my mock serves URIs in the JSON (to other JS, CSS or HTML) which should be injected into another angular app.

With CORS enabled for the JSON we can get URIs, but are not able to include the data they point to.

Best,
Daniel

[typicode]

How to reproduce the issue? I tried creating a static file, but I'm getting Access-Control-Allow-Origin

echo {} > db.json
mkdir public
echo foo > public/bar.html
json-server db.json

curl -i -X OPTIONS http://localhost:3000/bar.html

HTTP/1.1 204 No Content
X-Powered-By: Express
Vary: Origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Date: Thu, 18 Jun 2015 02:01:07 GMT
Connection: keep-alive

If you could give me a failing test, it would be helpful.

[danielkiedrowski]

Hello again. Thanks so much for taking the time.
Actually I don't see a Access-Control-Allow-Origin in your output.

Here are some tests i did. I initialized my json-server like you with

echo {} > db.json
mkdir public
echo foo > public/bar.html
json-server db.json

curl -i -X OPTIONS http://localhost:3000/bar.html

gives me

HTTP/1.1 204 No Content
X-Powered-By: Express
Vary: Origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Date: Thu, 18 Jun 2015 02:01:07 GMT
Connection: keep-alive

like yours. There is no Access-Control-Allow-Origin!

Using curl -i -X OPTIONS -H "Origin: *" http://localhost:3000/bar.html

Results in:

HTTP/1.1 204 No Content
X-Powered-By: Express
Access-Control-Allow-Origin: *
Vary: Origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Date: Thu, 18 Jun 2015 10:24:53 GMT
Connection: keep-alive

Yes. There is an Access-Control-Allow-Origin: *. That's the expected behaviour.

Actually getting the file with curl -i -X GET -H "Origin: *" http://localhost:3000/bar.html results in

HTTP/1.1 200 OK
X-Powered-By: Express
Accept-Ranges: bytes
Date: Thu, 18 Jun 2015 10:25:43 GMT
Cache-Control: public, max-age=0
Last-Modified: Thu, 18 Jun 2015 10:17:08 GMT
ETag: W/"4-1189418737"
Content-Type: text/html; charset=UTF-8
Content-Length: 4
Connection: keep-alive

foo

There is no CORS.

Vice versa getting a JSON resource with `curl -i -X GET -H "Origin: *" http://localhost:3000/items``

Results in

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Vary: Origin
Access-Control-Allow-Credentials: true
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
X-Content-Type-Options: nosniff
Content-Type: application/json; charset=utf-8
Content-Length: 2
ETag: W/"2-d4cbb29"
Date: Thu, 18 Jun 2015 10:52:46 GMT
Connection: keep-alive

[]

when initializing the db with echo {\"items\": []}> db.json.

Does this help?
Thank you again.

• Daniel

[typicode]

Yes, definitely. Thank you, I misunderstood the request at first.

[typicode]

Just released v0.7.18 with CORS enabled for static files ;)

[priyeshjain35]

Dear typicode,

I am facing the same issue for CORS I setup json-server(localhost:3000) and a react client app on localhost:8080 but while trying to hit API through client app using Axios, getting the CORS error, i tried by running the above curl command and found that Access-Control-Allow-Origin: * is not there.
Can you please help me out in this.

ERROR:
"xhr.js:173 Access to XMLHttpRequest at 'localhost:3000/todos' from origin 'http://localhost:8080' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."

[resting]

I have the same issue. Don't see the Access-Control-Allow-Origin: * in the header when starting the server from cli json-server fake.json.
Is there any way to add stuff to the header?

[resting]

Extended the server with success:

const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('fake.json')
const middlewares = jsonServer.defaults()

server.use(middlewares)
server.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*"); // update to match the domain you will make the request from
  // res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
})
server.use(router)
server.listen(3000, () => {
  console.log('JSON Server is running')
})