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!

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Bruno Reis
  • 313
  • 1
  • 2
  • 10
  • 3
    Have found solution for this? I am too facing same issue.. Can you please update if yes – PvDev May 28 '19 at 06:28
  • Check this answer out: https://stackoverflow.com/questions/55106295/npm-run-build-does-not-use-proxy – Reuel Ribeiro May 29 '19 at 01:33
  • Have you tried maybe getting a chrome extenstion for CORS and removing the config from the vue.config? – Michael May 29 '19 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 ? – IMParasharG Apr 28 '21 at 11:48

2 Answers2

11

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
onuriltan
  • 3,730
  • 4
  • 25
  • 37
  • As you said, i have created .env.development -> API_URL=http://localhost:8080/ and .env.production -> API_URL=https://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 http://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 May 30 '19 at 03:48
  • 1
    @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 – onuriltan May 30 '19 at 04:31
  • 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. https://fts.cardconnect:6443/ i have already faced this issue that's why asking – PvDev May 30 '19 at 04:37
  • xhr.js?b50d:178 POST http://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 – PvDev May 30 '19 at 04:39
  • 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 – onuriltan May 30 '19 at 04:41
  • my domain https://dev-cloudthrifty-com.firebaseapp.com and my payment gateway api url https://fts.cardconnect.com:6443/ – PvDev May 30 '19 at 04:41
  • Can you try reaching localhost:8080/cardsecure/api/v1/ccn/tokenize via postman to make sure api endpoint is present and reachable? – onuriltan May 30 '19 at 04:43
  • In localhost it works fine by setup vue.config.js like devServer: { proxy: 'https://fts.cardconnect.com:6443/' } but build version it shows cors policy blocked issue. Past three days i'm struck on this. can you help me out of this.. – PvDev May 30 '19 at 04:43
  • Okey so you can delete vue.config.js proxy configuration and start using env files, if you build your application vue will get the env. variables from .env.production – onuriltan May 30 '19 at 04:45
  • xhr.js?b50d:178 POST localhost:8080/cardsecure/api/v1/ccn/tokenize 404 (Not Found) still facing this issue – PvDev May 30 '19 at 04:49
  • Interesting, do you get this error in development or in production? – onuriltan May 30 '19 at 04:51
  • developement. i didnt tested in production let me test. do you have skype id so that i can share my some code to you. can you help me – PvDev May 30 '19 at 04:52
  • sry for asking skype id.. now i'm facing cors issue in production xhr.js:178 OPTIONS https://fts.cardconnect.com:6443/cardconnect/rest/auth 401 (Unauthorized) /list-server:1 Access to XMLHttpRequest at 'https://fts.cardconnect.com:6443/cardconnect/rest/auth' from origin 'https://dev-cloudthrifty-com.firebaseapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. – PvDev May 30 '19 at 05:01
  • I was going to share my email no problem, so your problem is you need to add CORS filter in your API application and allow your website domain and then authenticate – onuriltan May 30 '19 at 05:07
  • voiltan_93@hotmail.com – onuriltan May 30 '19 at 05:23
  • @onuriltan : I have remove the proxy and accessing api with complete url on production now facing cors issue ? – IMParasharG Apr 28 '21 at 11:52
10

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

Jess
  • 3,097
  • 2
  • 16
  • 42
  • 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 https://stackoverflow.com/questions/56165377/xmlhttprequest-https-fts-cardconnect-com6443-cardconnect-rest-auth-from-ori?noredirect=1#comment98963587_56165377 .. Can you pls help me out of this.. – PvDev May 30 '19 at 11:22