CODEWITHSUNDEEP
javascriptproxyfetchnuxt.jsbasic-authentication
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20173

Why does Nuxt's proxy wont work in production mode with my setup

To avoid users know what endpoint we are requesting data, we are using @nuxtjs/proxy

This config in nuxt.config.js

const deployTarget = process.env.NUXTJS_DEPLOY_TARGET || 'server'
const deploySSR = (process.env.NUXTJS_SSR === 'true') || (process.env.NUXTJS_SSR === true)

And the proxy settings

proxy: {
  '/api/**/**': {
    changeOrigin: true,
    target: process.env.VUE_APP_API_URL,
    secure: true,
    ws: false,
    pathRewrite: { '^/api/': '' }
  }
},

Also we deploy like so

NUXTJS_DEPLOY_TARGET=server NUXTJS_SSR=false nuxt build && NUXTJS_DEPLOY_TARGET=server NUXTJS_SSR=false nuxt start

Also in the httpClient that normally is

constructor (basePath, defaultTimeout, fetch, AbortController) {
  this.basePath = basePath
  this.defaultTimeout = parseInt(defaultTimeout, 10) || 1000
  this.isLocalhost = !this.basePath || this.basePath.includes('localhost')
  this.fetch = fetch
  this.AbortController = AbortController
}

Has been modified like so:

constructor (basePath, defaultTimeout, fetch, AbortController) {
  this.basePath = '/api'
  this.defaultTimeout = parseInt(defaultTimeout, 10) || 1000
  this.isLocalhost = !this.basePath || this.basePath.includes('localhost')
  this.fetch = fetch
  this.AbortController = AbortController
}

The fetch options are

_getOpts (method, options) {
  const opts = Object.assign({}, options)
  opts.method = opts.method || method
  opts.cache = opts.cache || 'no-cache'
  opts.redirect = opts.redirect || 'follow'
  opts.referrerPolicy = opts.referrerPolicy || 'no-referrer'
  opts.credentials = opts.credentials || 'same-origin'
  opts.headers = opts.headers || {}
  opts.headers['Content-Type'] = opts.headers['Content-Type'] || 'application/json'
  if (typeof (opts.timeout) === 'undefined') {
    opts.timeout = this.defaultTimeout
  }

  return opts
}

So that's making a request to https://api.anothersite.com/api/?request..

And in localhost using npm run dev its working just fine, it requests and fetchs the desired data.

But some how, when we deploy it to the staging environment all those request return

{ "code": 401, "data": "{'statusCode':401,'error':'Unauthorized','message':'Invalid token.'}", "json": { "statusCode": 401, "error": "Unauthorized", "message": "Invalid token." }, "_isJSON": true }

Note that

is it posible that this response that we are getting is because as requests are from the proxy they are not http authenticated?

Upvotes: 2

Views: 2227

Answers (2)

SHEMA Ally Blaise
SHEMA Ally Blaise

Reputation: 1

This is causes by case sensitive, nuxt/proxy forwarded the all the headers in lowercase so instead of getting Authorization header on your api use authorization.

Maybe you are using windows on your local environment which does not require case sensitive.

 array(12) { ["sec-fetch-site"]=> string(11) "same-origin" ["sec-fetch-mode"]=> string(4) "cors" ["sec-fetch-dest"]=> string(5) "empty" ["cookie"]=> string(18) "i18n_redirected=en" ["referer"]=> string(27) "http://localhost:3000/stats" ["connection"]=> string(5) "close" **["authorization"]**=> string(47) "Bearer e63a62b6e8ee6b3749dc5f01fae33d37a751aba2" ["accept-encoding"]=> string(17) "gzip, deflate, br" ["accept-language"]=> string(14) "en-US,en;q=0.5" ["accept"]=> string(33) "application/json, text/plain, */*" ["user-agent"]=> string(84) "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/116.0" ["host"]=> string(14) "localhost:8081" }

Upvotes: 0

kissu
kissu

Reputation: 46769

You should find somebody who knows some details because you will need those for that project.
Especially because here, you're hosting your app somewhere and that platform is probably missing an environment variable, hence the quite self-explanatory error

401,'error':'Unauthorized','message':'Invalid token

That also explains why that one works locally (you probably have an .env file) and not once pushed.

You could try to create a repro on an SSR-ready VPS but I'm pretty sure that @nuxtjs/proxy is working fine.
Otherwise, double checking the network requests in your browser devtools is still the way to go regarding the correct configuration of the module.
Anyway, further details are needed from your side here.

As a good practice, you should also have the following in your nuxt.config.js file

ssr: true,
target: 'server'

rather than using inline variables for those, safer and self-explanatory for everybody that way (on top of being less error-prone IMO). Or, you can use an env variable for the key itself.

Upvotes: 1

Related Questions