Domain is blocked by CORS even though it is in the origin string?

[vallamost]

Hopefully a quick question from incorrect syntax. I am trying to only allow requests that are from my domain to succeed with fastify-cors. Requests are succeeding if I use an asterisk in the config but if I try and get specific on the domain it is failing.

This is the origin config I am trying to use:

  fastify.register(require('fastify-cors'), {
    origin: 'http://modfi-dev.nonset.com' // fails
  })

However when I use Firefox to initiate a request to my App I am getting this CORS error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://modfi-dev.nonset.com:4000/batch_stock_prices/?stocks=AAPL,MSFT,NFLX,TSLA,SBUX. 

(Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://modfi-dev.nonset.com’).

I've tried adding the port as well as trying a regex expression for the origin config but it doesn't seem to make a difference.

This is how I am attempting to make the request to the fastify server from my app

axios.get('http://' + appDomain +':4000/batch_stock_prices/?stocks=' + _stock, { timeout: 2000 })
...

appDomain is modfi-dev.nonset.com

Requests go through fine if I use an asterisk but that defeats the purpose of CORS:

  fastify.register(require('fastify-cors'), {
    origin: '*' // works fine
  })

Am I missing something obvious?

[mcollina]

I think you need to include the port.

fastify.register(require('fastify-cors'), {
  origin: 'http://modfi-dev.nonset.com:4000'
})

[vallamost]

I've tried that as well, I see the same issue, it seems like it's looking for an exact match:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://modfi-dev.nonset.com:4000/batch_stock_prices/?stocks=AAPL,MSFT,NFLX,TSLA,SBUX. 

(Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://modfi-dev.nonset.com:4000’)

  fastify.register(require('fastify-cors'), {
    origin: 'http://modfi-dev.nonset.com:4000'
  })

[Eomm]

From docs, it is intended https://github.com/fastify/fastify-cors#options

string: strict match
you need to use a regexp: origin: /^http://modfi-dev.nonset.com:4000/

[vallamost]

you need to use a regexp: origin: /^http://modfi-dev.nonset.com:4000/

Thanks for the response, the documentation made it sound like the context of the string match will match the domain name.

Regex is still throwing issues:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://modfi-dev.nonset.com:4000/batch_stock_prices/?stocks=AAPL,MSFT,NFLX,TSLA,SBUX. 

(Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘false’).

The regex I am trying:

  fastify.register(require('fastify-cors'), {
    origin: /^http:\/\/modfi-dev\.nonset\.com:4000/,
  })

I also tried getting more aggressive but it still ending up with a 'false' result

origin: /^http?:\/\/modfi-dev.nonset.com:4000\/[a-z]*.*/

Seems to match fine when testing here: https://regex101.com/

[Eomm]

I would start from a playground like this since it seems to work:

const fastify = require('fastify')
const app = fastify({ logger: true })

app.register(require('fastify-cors'), {
  origin: /^http:\/\/modfi-dev\.nonset\.com:4000/
})

app.get('/', async () => 'hello')

;[
  '', // empty
  'http://modfi-dev.nonset.com:4000/batch_stock_prices/?stocks=AAPL,MSFT,NFLX,TSLA,SBUX',
  'http://modfi-dev.nonset.com'
].forEach(origin => {
  app.inject({
    url: '/',
    headers: { origin }
  }, (_, res) => {
    console.log(`origin [${origin}] = ${JSON.stringify(res.headers, null, 2)}`)
  })
})

The second one will print:

origin [http://modfi-dev.nonset.com:4000/batch_stock_prices/?stocks=AAPL,MSFT,NFLX,TSLA,SBUX] = {
  "vary": "Origin",
  "access-control-allow-origin": "http://modfi-dev.nonset.com:4000/batch_stock_prices/?stocks=AAPL,MSFT,NFLX,TSLA,SBUX",
  "content-type": "text/plain; charset=utf-8",
  "content-length": "5",
  "date": "Wed, 17 Jun 2020 07:49:11 GMT",
  "connection": "keep-alive"
}

[karrtopelka]

Hello, I have an issue with cors. My code is like in documentation or tutorials, but I still get error, even if origin is set to '*'. I've set:
fastify.register(cors, { origin: 'http://localhost:3000', credentials: true, })
but after trying to make a post method from frontend I get this:

I made a typescript project via fastify/cli, and put register in app.ts inside the app function
Any suggestions?

[Eomm]

I don't understand: where did you set *?

Here should work:

fastify.register(cors, { origin: '*', credentials: true, })

Note that http://localhost:3000 !== http://localhost:3000/auth/login

In the worse scenario you can try the function:

function checkOrigin (origin, callback) {
   console.log({ origin })
   // do what you want
   callback(null, true)
}

fastify.register(cors, { origin: checkOrigin, credentials: true, })

[Uzlopak]

localhost vs. 127.0.0.1

[karrtopelka]

I don't understand: where did you set *?

Here should work:

fastify.register(cors, { origin: '*', credentials: true, })

Note that http://localhost:3000 !== http://localhost:3000/auth/login

In the worse scenario you can try the function:

function checkOrigin (origin, callback) {
   console.log({ origin })
   // do what you want
   callback(null, true)
}

fastify.register(cors, { origin: checkOrigin, credentials: true, })

As I know combining '*' with credentials is bad, so it will not work, but I checked everything, like your suggestion, without credentials, with localhost, with 127.0.0.1, and so on.

In postman, everything works fine, but when I try to make a call from frontend, nothing works

[karrtopelka]

localhost vs. 127.0.0.1

I also tried it, and no success