0

SOLVED The problem was coming from my start script which was linked to an old version of the build, and i didn't remember changing it that's why i didn't check that... So nothing is wrong with the expressjs/cors package / TS compatibility ;)

I've created an API using NodeJS, Express & TypeScript, and i'm having troubles resolving a CORS-related issue. My API is accessible from the following domain patterns: https://api.domain.com, and the front from https://www.front.domain.com.

When I try login from the front-end, i'm receiving this error :

Access to XMLHttpRequest at 'https://api.domain.com/sessions/login' from origin 'https://www.front.domain.com' 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.

When i'm running the API locally, the 'Access-Control-Allow-Origin' header is present (I used Postman to check it), and the error isn't there. But when i deploy my API, the same header is absent from every request, and i get the above error message.

I've tried deploying it on OVH web cloud and Clever cloud, and since i'm having the issue on both services I think there is something wrong with my code but i can't find it.

My server code is the following (createServer.ts):

const createServer = () => {

    const app = express()

    app.use(cors({ credentials: true, origin: 'https://www.front.domain.com', methods: ["OPTIONS", "HEAD", "GET", "POST", "PUT", "DELETE"] }))
    app.use(express.json())
    app.use(cookieParser())
    app.use(deserializeToken)

    routes(app)
    return app

}

(app.ts)

const app = createServer()

app.listen(
    port,
    async () => {
        console.info(`API is running on: ${rootUrl}, port: ${port}`)
        await dbConnect()
    }
)

EDIT : The issue seems to come from the build. The header disapears after the build. here is my tsconfig.json file :

{
    "compilerOptions": {
        "outDir": "build",
        "target": "es6",
        "module": "commonjs",
        "esModuleInterop": true, 
        "forceConsistentCasingInFileNames": true, 
        "strict": true,
        "skipLibCheck": true
    }
}

Before build : b4 build

After build after build

Arnaud
  • 89
  • 1
  • 7
  • As a debugging aid you can try logging the actual origin of the request in your server code. – tromgy Jan 07 '22 at 15:52
  • You can also debug by not specifying parameters to `cors`. According to [the Express docs](https://expressjs.com/en/resources/middleware/cors.html), the default cors configuration is very lenient, which would help if you're currently passing wrong parameters. – Gabriel Pizarro Jan 07 '22 at 15:55
  • @tromgy I tried to log the origin in my controllers for the login route (POST) or healtcheck one (GET) but nothing gets log in my server console and the cors error keeps showing. I also tried using a "/" at the end of the origin url to see if it changes anything but the problem is the same. – Arnaud Jan 07 '22 at 16:38
  • @gabriel if I don't pass any parameters, I still get the error. – Arnaud Jan 07 '22 at 16:38

1 Answers1

-1

Did you check the pre-flight request in your inspector ? It should be an OPTIONS request just before your original request with the same URL.

Gaël Reyrol
  • 126
  • 6
  • I did yes. But i finally found out what the problem was.. my start script was linked to an old version of the build. I didn't remember changing it. At least now I know another. stupid mistake to check when something isn't working as expected :p – Arnaud Jan 10 '22 at 16:13