VueJS - vue.config.js proxy configuration for build

Question

I'm currently using devServer{proxy:{...}} in vue.config.js to configure proxy for api calls for avoiding CORS problems in my application. It works fine when I run npm run serve in localhost.

Now I need to deploy my application to a host, so I run npm run build, change the url's of my Ajax calls and it's not running... So what I indeed need is to configure my proxy for deployment (build), not for devServer.

What is the correct way to do that?

I've already tried: server{proxy:{...}} and build{proxy:{...}}, but none of them are allowed when running npm run build.

Thank you!

Answer 1

You can try another approach which is adding API URL's to .env files

If you are using Vue CLI you can create .env.development and .env.production files and put API URL's for development and production like:

.env.development

VUE_APP_API_URL=http://localhost:8080/api

.env.production

VUE_APP_API_URL=http://myapp.com/api

In your project files you can access the variables by putting VUE_APP_ keyword like;

Your file to make api requests

const url = process.env.VUE_APP_API_URL
const res = axios.get(url, config).then (...)
                                  .catch(...)

You can look for more from Vue's official docs

To handle the CORS issue, I can give you some tips.

1. Divide your app as packages named server and client
2. Move everything related to vuejs to client folder
3. Move server.js to server folder
4. Implement cardconnect inside server.js
5. Create an nodejs api via expressjs and move cardconnect logic to controllers(endpoints)
6. Consume nodejs api that makes cardconnect implementation via vue.js(this will resolve the cors issue since you dont make requests from vuejs, but triggering the cardconnect implementation via node.js)
7. Serve Vue app with your Node.js server

Answer 2

Vue CLI, by default, will not ship a webserver like the proxy, it will deploy bundled Javascript in a dist/ directory.

1. The proxy isn't meant to be deployed to production and that's why you're not finding information about deploying with it.
2. If you're serving a static /dist directory, find the instructions here for your provider (S3, Netlify, Firebase) and follow them.

Longer answer:

You're running into an issue because the proxy is not supposed to be used for production. The proxy Vue CLI is shipping with is webpack-dev-server. It is used by Vue CLI to enable you to serve your Javascript files locally during development.

There are security vulnerabilities if you use webpack-dev-server (aka the proxy) in prod. Don't do it.

Instead, you need to find the hosting provider you're using and follow the instructions here: https://cli.vuejs.org/guide/deployment.html to deploy your application. If your application is personal or can be public, I suggest using Netlify.

For example... In my production setup, we deploy to an AWS S3 bucket and serve content with either AWS Cloudfront CDN or the Fastly CDN. Our API urls are always the production server ones, and we use this setting in the proxy to pass through to our local server