20

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!

Improve this question
4
  • 3
    Have found solution for this? I am too facing same issue.. Can you please update if yes Commented May 28, 2019 at 6:28
  • Check this answer out: stackoverflow.com/questions/55106295/… Commented May 29, 2019 at 1:33
  • Have you tried maybe getting a chrome extenstion for CORS and removing the config from the vue.config? Commented May 29, 2019 at 11:19
  • What is the outcome of this question ? Remove the proxy from config and use the complete url with VUE_APP_API_URL from .env ? Commented Apr 28, 2021 at 11:48

2 Answers 2

Reset to default
11

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

thanks for answering. here i'm yarn build. its works fine in localhost:8080 by creating vue.config.js deveserver proxy url. How to do build version. I'm totally new to vuejs. I have already asked this question and share some part of code there. Here is the link stackoverflow.com/questions/56165377/… .. Can you pls help me out of this..
11
+25

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
Improve this answer

16 Comments

As you said, i have created .env.development -> API_URL=localhost:8080 and .env.production -> API_URL=fts.cardconnect.com:6443. And called const url = process.env.VUE_APP_API_URL in axios post method const URL = url+'/cardsecure/api/v1/ccn/tokenize'; But its showing error POST localhost:8080/undefined/cardsecure/api/v1/ccn/tokenize 404 (Not Found). And one thing i have commented all lines inside vue.config.js file
@PvDev sorry my mistake, you need to define the API URL also with VUE_APP keyword, so instead of API_URL, define them as VUE_APP_API_URL in your env files, I edited my answer as well
whether i will face corss origin policy issue for production. Because i have website in http:dev-xxx-firebaseapp.com and my api from cardconnect. fts.cardconnect:6443 i have already faced this issue that's why asking
xhr.js?b50d:178 POST localhost:8080/cardsecure/api/v1/ccn/tokenize 404 (Not Found) whether i need add something in vue.config.js. cause i have commented all lines in vue.config.js
I understand, so there are two ways I know, one of them is define a CORS filter in your api and let your website domain to reach server with CORS configuration, second way is serving your website from api application so they will be in the same domain
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.