Integrated server support for CORS

[iherger]

Perceived Problem

I am not able to use the nexus-future GraphQL server from my frontend. I am getting the error

Access to XMLHttpRequest at 'http://localhost:4000/graphql' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Ideas / Proposed Solution(s)

• Allow users to enable CORS on the server, maybe through something like

settings.change{{
  server: {
    cors: true;
  }
});

[jasonkuhrt]

With the new custom server api #382 you should be able to do something like this now:

import cors from 'cors'

server.custom(({ express }) => {
  express.use(cors())
})

[jasonkuhrt]

What would an ideal cors API in core look like? Is there something the framework can do worthwhile here? Should this be relegated to server custom logic?

[nargetdev]

In the context of the Scaffold project using npx nexus@next I'm confused on how to enable CORS. Also blocked on the frontend. Similarly confused how to use #382

[jasonkuhrt]

@nargetdev For now its just an express instance, so nothing novel from the Framework https://www.nexusjs.org/#/api/modules/main/exports/server?id=express.

[crtr0]

When I try to follow the code sample referenced in the link above, I get the following error:

TypeError: cors_1.default is not a function
    at Object.<anonymous> (/Users/crabasa/Code/nexus-test/api/app.ts:16:24)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Module.m._compile (/Users/crabasa/Code/nexus-test/node_modules/ts-node/src/index.ts:836:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Object.require.extensions.<computed> [as .ts] (/Users/crabasa/Code/nexus-test/node_modules/ts-node/src/index.ts:839:12)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at eval (eval at start (/Users/crabasa/Code/nexus-test/node_modules/nexus/src/runtime/start/dev-runner.ts:40:14), <anonymous>:27:1)

My code looks like this:

// app.ts
import cors from 'cors'
import { server } from 'nexus'

server.express.use(cors())

[jasonkuhrt]

@crtr0 Setting esModuleInterop to true should fix that. TS issue.

[crtr0]

I added the following line to my tsconfig.json:

 "esModuleInterop": true

When I run npx nexus build, I get this new error:

npx nexus build
1141 ● nexus:plugin:nexus-plugin-prisma Running Prisma generators ...
2248 ● nexus:build Running typegen & extracting types from addToContext calls
 496 ● nexus:build Compiling a production build
Error: api/app.ts:13:18 - error TS7016: Could not find a declaration file for module 'cors'. '/Users/crabasa/Code/nexus-test/node_modules/cors/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/cors` if it exists or add a new declaration (.d.ts) file containing `declare module 'cors';`

13 import cors from 'cors'
                    ~~~~~~

    at Object.compile (/Users/crabasa/Code/nexus-test/node_modules/nexus/src/lib/tsc.ts:162:11)
    at Object.buildNexusApp (/Users/crabasa/Code/nexus-test/node_modules/nexus/src/lib/build/build.ts:99:3)
    at Build.parse (/Users/crabasa/Code/nexus-test/node_modules/nexus/src/cli/commands/build.ts:32:5)
    at main (/Users/crabasa/Code/nexus-test/node_modules/nexus/src/cli/main.ts:86:18)

I'm sorry if I'm missing something, but I'm new to TypeScript and it seems to be what Nexus is built with. Is there an option to use Nexus without TypeScript?

[jasonkuhrt]

I'm sorry if I'm missing something, but I'm new to TypeScript

No problem. For what its worth we have a little curated list of material to help learn it: https://www.nexusjs.org/#/getting-started/onboarding?id=pre-requisites

Is there an option to use Nexus without TypeScript?

Not yet but keep an eye on/weigh in at graphql-nexus/nexus#85.

I get this new error:

npm install --save-dev @types/cors

should solve it 🤞

[crtr0]

That worked! Thank you! 👍

[leonardodino]

Hey there! 👋
I have the same (cors) error on [email protected].
downgrading to [email protected] solves it.

running nexus build results in:

1098 ✕ nexus Failed to scan app for used plugins because there is a runtime error in the app
       | error  TypeError: cors_1.default is not a function
       |            at Object.<anonymous> (/redacted/src/app.ts:13:42)
       |            at Module._compile (internal/modules/cjs/loader.js:1156:30)
       |            at Module._compile (/redacted/node_modules/pirates/lib/index.js:99:24)
       |            at Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
       |            at Object.newLoader [as .ts] (/redacted/node_modules/pirates/lib/index.js:104:7)
       |            at Module.load (internal/modules/cjs/loader.js:1000:32)
       |            at Function.Module._load (internal/modules/cjs/loader.js:899:14)
       |            at Module.require (internal/modules/cjs/loader.js:1042:19)
       |            at require (internal/modules/cjs/helpers.js:77:18)
       |            at eval (eval at start (/redacted/node_modules/nexus/dist/runtime/start/dev-runner.js:26:20), <anonymous>:30:1)

(I'm using a really simple, private, monorepo, but everything is working, I was using 0.20.0 also without problems)

---

update: It seems that it's caused by #727
update 2: after upgrading to 0.21.0-next.20 everything is working again ❤️

[yantakus]

I'm having the same TypeError: cors_1.default is not a function error with both latest version (next.9 ATM) and next.5 as well. esModuleInterop is set to true.

[nemvik]

I do have similar problem.
When i run nexus dev it's all working properly with CORS.

But when i run build and then I run node .nexus/build/api on production (or localhost) it's not accepting my requests. Like CORS are not enabled.

Any ideas why?
During build there are no errors or warnings.