Use axios proxy trough OpenVPN protected frontend in VueJS

Question

hope you are all good.

I'm facing an issue with my frontend instance. Actually, we have a frontend hosted and secured by OpenVPN credentials. That means, no one can access it without a connection to our VPN. That configuration works well, but still one issue with axios proxies.

Quick notes:

we are not using server-side rendering
frontend hosted in AWS CloudFront
backend deployed to AWS EC2 instances

This is the current configuration in my nuxtjs frontend nuxt.config.js file:

{
  ...,

  proxy: {
    '/api/': {
      target: !process.env.FLAVOR
        ? 'http://localhost:8009'
        : (process.env.FLAVOR === 'production'
            ? 'https://api.domain.tld'
            : 'https://' + process.env.FLAVOR + '-api.domain.tld'),
      pathRewrite: { '^/api/': '/v1/' }
    }
  },

  ...
}

This solution helps me to avoid all environments easily, without setting each URL inside my environment variable in Dockerfile, and also the CORS policy.

In that way, if I check the console inspector and verify the network tab, I got access denied because not connected to the client. How do VPN and proxy really work? Are the requests called client-side or server-side?

Thanks by advance for helping me.

Use axios proxy trough OpenVPN protected frontend in VueJS

0 Answers0