VulcanJS / Vulcan

🌋 A toolkit to quickly build apps with React, GraphQL & Meteor
http://vulcanjs.org
MIT License
7.98k stars 1.88k forks source link

Error while server-rendering - Network request failed with status 403 #2151

Open mousetraps opened 5 years ago

mousetraps commented 5 years ago

I've narrowed down the issue, but still don't have a solution.

Our setup involves Cloudflare DNS (https://www.example.com) -> Heroku (https://example.herokuapp.com)

Visiting the Heroku instance directly (after modifying ROOT_URL environment variable and the graphQLendpointURL property in METEOR_SETTINGS to point to the respective heroku urls) works fine. However, visiting https://www.example.com yields the following server-side errors. There are no client errors. I suspect this might be related to CORS.

Thoughts on a workaround? This issue is slowing down website loads considerably.

2018-12-13T07:33:23.878267+00:00 app[web.1]: Error while server-rendering. date: Thu Dec 13 2018 07:33:23 GMT+0000 (UTC) url: /sample-selection
2018-12-13T07:33:23.878813+00:00 app[web.1]: { Error: Network error: Network request failed with status 403 - "Forbidden"
2018-12-13T07:33:23.878817+00:00 app[web.1]:     at new ApolloError (/app/.meteor/heroku_build/app/programs/server/npm/node_modules/apollo-client/apollo.umd.js:1981:28)
2018-12-13T07:33:23.878819+00:00 app[web.1]:     at /app/.meteor/heroku_build/app/programs/server/npm/node_modules/apollo-client/apollo.umd.js:3091:41
2018-12-13T07:33:23.878821+00:00 app[web.1]:     at /app/.meteor/heroku_build/app/programs/server/npm/node_modules/apollo-client/apollo.umd.js:3583:25
2018-12-13T07:33:23.878824+00:00 app[web.1]:     at Array.forEach (<anonymous>)
2018-12-13T07:33:23.878826+00:00 app[web.1]:     at /app/.meteor/heroku_build/app/programs/server/npm/node_modules/apollo-client/apollo.umd.js:3580:27
2018-12-13T07:33:23.878828+00:00 app[web.1]:     at Array.forEach (<anonymous>)
2018-12-13T07:33:23.878831+00:00 app[web.1]:     at QueryManager.broadcastQueries (/app/.meteor/heroku_build/app/programs/server/npm/node_modules/apollo-client/apollo.umd.js:3577:42)
2018-12-13T07:33:23.878832+00:00 app[web.1]:     at /app/.meteor/heroku_build/app/programs/server/npm/node_modules/apollo-client/apollo.umd.js:3047:31
2018-12-13T07:33:23.878835+00:00 app[web.1]:     at /app/.meteor/heroku_build/app/programs/server/npm/node_modules/meteor/promise/node_modules/meteor-promise/fiber_pool.js:43:40
2018-12-13T07:33:23.878837+00:00 app[web.1]:  => awaited here:
2018-12-13T07:33:23.878840+00:00 app[web.1]:     at Function.Promise.await (/app/.meteor/heroku_build/app/programs/server/npm/node_modules/meteor/promise/node_modules/meteor-promise/promise_server.js:56:12)
2018-12-13T07:33:23.878842+00:00 app[web.1]:     at Object.preRender (packages/vulcan:routing/lib/server/routing.jsx:62:14)
2018-12-13T07:33:23.878844+00:00 app[web.1]:     at generateSSRData (packages/vulcan:routing/lib/server/router.jsx:53:15)
2018-12-13T07:33:23.878845+00:00 app[web.1]:     at sendSSRHtml (packages/vulcan:routing/lib/server/router.jsx:86:45)
2018-12-13T07:33:23.878847+00:00 app[web.1]:     at match (packages/vulcan:routing/lib/server/router.jsx:149:11)
2018-12-13T07:33:23.878849+00:00 app[web.1]:     at /app/.meteor/heroku_build/app/programs/server/npm/node_modules/react-router/lib/match.js:67:5
2018-12-13T07:33:23.878850+00:00 app[web.1]:     at /app/.meteor/heroku_build/app/programs/server/npm/node_modules/react-router/lib/createTransitionManager.js:108:11
2018-12-13T07:33:23.878852+00:00 app[web.1]:     at done (/app/.meteor/heroku_build/app/programs/server/npm/node_modules/react-router/lib/AsyncUtils.js:79:19)
2018-12-13T07:33:23.878854+00:00 app[web.1]:     at /app/.meteor/heroku_build/app/programs/server/npm/node_modules/react-router/lib/AsyncUtils.js:85:7
2018-12-13T07:33:23.878856+00:00 app[web.1]:     at getComponentsForRoute (/app/.meteor/heroku_build/app/programs/server/npm/node_modules/react-router/lib/getComponents.js:11:5)
2018-12-13T07:33:23.878858+00:00 app[web.1]:     at /app/.meteor/heroku_build/app/programs/server/npm/node_modules/react-router/lib/getComponents.js:35:5
2018-12-13T07:33:23.878859+00:00 app[web.1]:     at /app/.meteor/heroku_build/app/programs/server/npm/node_modules/react-router/lib/AsyncUtils.js:84:5
2018-12-13T07:33:23.878861+00:00 app[web.1]:     at Array.forEach (<anonymous>)
2018-12-13T07:33:23.878863+00:00 app[web.1]:     at mapAsync (/app/.meteor/heroku_build/app/programs/server/npm/node_modules/react-router/lib/AsyncUtils.js:83:9)
2018-12-13T07:33:23.878865+00:00 app[web.1]:     at getComponents (/app/.meteor/heroku_build/app/programs/server/npm/node_modules/react-router/lib/getComponents.js:34:28)
2018-12-13T07:33:23.878867+00:00 app[web.1]:     at finishEnterHooks (/app/.meteor/heroku_build/app/programs/server/npm/node_modules/react-router/lib/createTransitionManager.js:102:35)
2018-12-13T07:33:23.878868+00:00 app[web.1]:     at runTransitionHooks (/app/.meteor/heroku_build/app/programs/server/npm/node_modules/react-router/lib/TransitionUtils.js:79:7)
2018-12-13T07:33:23.878870+00:00 app[web.1]:     at runEnterHooks (/app/.meteor/heroku_build/app/programs/server/npm/node_modules/react-router/lib/TransitionUtils.js:112:12)
2018-12-13T07:33:23.878872+00:00 app[web.1]:     at /app/.meteor/heroku_build/app/programs/server/npm/node_modules/react-router/lib/createTransitionManager.js:95:7
2018-12-13T07:33:23.878874+00:00 app[web.1]:     at runTransitionHooks (/app/.meteor/heroku_build/app/programs/server/npm/node_modules/react-router/lib/TransitionUtils.js:79:7)
2018-12-13T07:33:23.878876+00:00 app[web.1]:     at runChangeHooks (/app/.meteor/heroku_build/app/programs/server/npm/node_modules/react-router/lib/TransitionUtils.js:136:12)
2018-12-13T07:33:23.878877+00:00 app[web.1]:     at finishMatch (/app/.meteor/heroku_build/app/programs/server/npm/node_modules/react-router/lib/createTransitionManager.js:92:5)
2018-12-13T07:33:23.878879+00:00 app[web.1]:   graphQLErrors: [],
2018-12-13T07:33:23.878881+00:00 app[web.1]:   networkError: 
2018-12-13T07:33:23.878883+00:00 app[web.1]:    { Error: Network request failed with status 403 - "Forbidden"
2018-12-13T07:33:23.878885+00:00 app[web.1]:     at /app/.meteor/heroku_build/app/programs/server/npm/node_modules/apollo-client/apollo.umd.js:730:45
2018-12-13T07:33:23.878887+00:00 app[web.1]:     at /app/.meteor/heroku_build/app/programs/server/npm/node_modules/meteor/promise/node_modules/meteor-promise/fiber_pool.js:43:40
2018-12-13T07:33:23.878906+00:00 app[web.1]:      response: 
2018-12-13T07:33:23.878909+00:00 app[web.1]:       Body {
2018-12-13T07:33:23.878912+00:00 app[web.1]:         url: 'https://www.example.com/graphql',
2018-12-13T07:33:23.878914+00:00 app[web.1]:         status: 403,
2018-12-13T07:33:23.878916+00:00 app[web.1]:         statusText: 'Forbidden',
2018-12-13T07:33:23.878918+00:00 app[web.1]:         headers: [Object],
2018-12-13T07:33:23.878919+00:00 app[web.1]:         ok: false,
2018-12-13T07:33:23.878921+00:00 app[web.1]:         body: [Object],
2018-12-13T07:33:23.878923+00:00 app[web.1]:         bodyUsed: false,
2018-12-13T07:33:23.878925+00:00 app[web.1]:         size: 0,
2018-12-13T07:33:23.878926+00:00 app[web.1]:         timeout: 0,
2018-12-13T07:33:23.878928+00:00 app[web.1]:         _raw: [],
2018-12-13T07:33:23.878929+00:00 app[web.1]:         _abort: false } },
2018-12-13T07:33:23.878938+00:00 app[web.1]:   message: 'Network error: Network request failed with status 403 - "Forbidden"',
2018-12-13T07:33:23.878940+00:00 app[web.1]:   extraInfo: undefined,
2018-12-13T07:33:23.878942+00:00 app[web.1]:   queryErrors: [ [Circular] ] }
mousetraps commented 5 years ago

Figured it out! Turns out it was an SSL issue! Isolated by running through all the CF setup steps on a test app, but it would have been nice to have a more helpful error message.

SachaG commented 5 years ago

I think I just ran into the same issue actually. I was getting 403 errors for all internal GraphQL requests (those going from Meteor to the GraphQL endpoint during SSR). To fix it I did the following:

If you found a way to make it work with all CloudFlare features enabled though I'd be very interested.

And yeah the error messages are not very helpful… hopefully this issue goes away altogether with Apollo 2, since there shouldn't be a separate request anymore.

mousetraps commented 5 years ago

Yep, I meant to post an update. I also had to put Cloudflare into "DNS-only" mode, which was quite sad. Was already forcing SSL, and I actually redirect the other way: non-www to www, but I don't think that was necessary step. Additionally found that I had to use Full (strict) on certificates. Looking forward to Apollo 2!

SachaG commented 5 years ago

Let's keep this open until we either find the "real" fix with full Cloudflare features; or we update to Apollo 2 then.

mousetraps commented 5 years ago

@SachaG was just thinking about this... what's special about SSR in CDN mode? IIRC, queries without SSR were going through just fine.

SachaG commented 5 years ago

With the current version of Apollo, when the server needs to access your API data for the SSR process, it makes a query to the GraphQL endpoint with a new request. My understanding is that maybe Cloudflare messes up the process at that point.

In Apollo 2, if I'm not mistaken there is no need to make an actual request anymore, the endpoint can be queries in the same process.

My understanding of all this is pretty fuzzy though so I might be wrong.

eric-burel commented 5 years ago

Hi, the relevant doc about this in Apollo 2 is here: https://www.apollographql.com/docs/react/features/server-side-rendering.html#local-queries and here https://www.apollographql.com/docs/link/links/schema.html

They specifically mention Heroku for example.

To sum it up in Apollo 2 you have a new alternative specifically tailored for server side usage, the Schema Link. Instead of sending an HTTP request to itself to fetch data, Apollo will simply call the schema resolvers directly.

So indeed we can hope that this will prevent such issues, though I am not sure at all of the technical consequences of using the Schema Link vs usual HTTP Link, this is all very new.

SachaG commented 5 years ago

Thanks for the clarification! So are you currently using that schema link in the Apollo 2 branch?

eric-burel commented 5 years ago

Yes it's used in the Apollo 2 branch (here), if you want to test this already it should work as expected