How to set CORS for two applications running as docker

Question

I'm running my frontend application (nextJS) at https://editor.website.com and my backend application (expressJS) at https://api.editor.website.com - both as docker container. I'm trying to upload some image files using graphQL and mostly it works, but sometimes it fails with these two errors:

POST https://api.editor.website.com/graphql 413

Access to fetch at 'https://api.editor.website.com/graphql' from origin 'https://editor.website.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I tried to set universal cors to prevent this problem, but this doesn't work. So what am I missing?

Server

import express from 'express'
import cors from 'cors'

const app = express()
app.options('*', cors())
// app.use(cors())

server.applyMiddleware({ app, path: '/graphql' })

h3yduck · Accepted Answer · 2019-12-28T20:53:03.437

1

I don't think it's CORS related if it works most of the time (you might receive CORS errors because you don't hit that middleware in the chain if another one terminates it). From what I can tell you receive 413 - Request Entity Too Large.

I don't have much experience with Apollo server side but you should try the following according to Apollo API Reference:

server.applyMiddleware({
    app, path: '/graphql',
    cors: {
        origin: 'https://editor.website.com',
        optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
    },
    bodyParserConfig: {limit: '50mb'} // or your desired limit
})

EDIT:

We continued the discussion in chat and found out that there was an nginx reverse proxy in front of the service which had a limit of 1MB request size. This solved the problem: https://github.com/jwilder/nginx-proxy/issues/981#issuecomment-345434827

edited Dec 28 '19 at 20:53

answered Dec 28 '19 at 17:30

h3yduck

913
5
11

Unfortunately, it didn't help. Still the same problem. Only with some files (always the same), but locally everything works. – user3142695 Dec 28 '19 at 19:25
Are those files larger than the other ones which are working fine? – h3yduck Dec 28 '19 at 19:29
I'm not sure if it's a valid issue, but this might be the cause: https://github.com/apollographql/apollo-server/issues/3279 – h3yduck Dec 28 '19 at 19:30
Digging a bit deeper, I found another issue here as well: https://stackoverflow.com/questions/55464415/increasing-body-limit-size-in-apollo-server-express. Seems like a valid bug in Apollo server. – h3yduck Dec 28 '19 at 19:32
No, I don't see a difference between the files. They are all from the same type with nearly the same size and dimensions. So I don't see anything from where to start debugging. – user3142695 Dec 28 '19 at 19:36
It might not be `bodyparser` if they are the same size :/ – h3yduck Dec 28 '19 at 19:37
They are all nearly 1MB. But as I see most of them hav 800-900kb, if the files are 1.2MB the upload is failing. So it seems to be a 1MB limit... But in this case your solution should have worked... – user3142695 Dec 28 '19 at 19:40
Ah I see, then I think it really is a `bodyparser` limit related issue. The solution I provided might not work because there is a bug in Apollo server (see the links I provided). – h3yduck Dec 28 '19 at 19:42
Seems like `bodyParser.json({limit: '50mb'})` solved the problem for some people: https://github.com/apollographql/apollo-server/issues/288 – h3yduck Dec 28 '19 at 19:53
Do you have some kind of reverse proxy in front of your service in production? (Where is it deployed to?) – h3yduck Dec 28 '19 at 20:39
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/205001/discussion-between-user3142695-and-h3yduck). – user3142695 Dec 28 '19 at 20:39

How to set CORS for two applications running as docker

1 Answers1