Vue CORS in production

by

I’m a beginner in Vue and now I’m fighting with CORS problem.
While developing my app (http://localhost:8080/) sends a request to http://zz.zz.zz.zz:3000/ and these code helped me to fix CORS:

vue.config.js

module.exports = {
  devServer: {
    proxy: "http://zz.zz.zz.zz:3000/"
  }
};

But when my app is in production (http://zz.zz.zz.zz:3001/) sends a request to http://zz.zz.zz.zz:3000/ it gets CORS error. I tried the code below but nothing changed. What am I doing wrong?

.env.production & .env.development

VUE_APP_API_URL=http://zz.zz.zz.zz:3000/

example of a request in component:

let url = process.env.VUE_APP_API_URL + "?name=anna";
let formData = new FormData();
formData.append("file", this.file);
const config = {
      headers: {
        "Content-Type": "multipart/form-data"
      }
};
axios
  .post(url, formData, config)
  .then(...)
  .catch(...)

(CORS are allowed on the server)

Here’s package.json:

{
  "name": "PROJECT_1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.20.0",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-cookies": "^1.7.4",
    "vue-plugin-load-script": "^1.3.2",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.14.1",
    "prettier": "^1.19.1",
    "sass": "^1.26.10",
    "sass-loader": "^8.0.2",
    "vue-cookie": "^1.1.4",
    "vue-template-compiler": "^2.6.11"
  }
}

78 thoughts on “Vue CORS in production”

  54. Hi! After study a few of the blog posts on your website now, and I truly like your way of blogging. I bookmarked it to my bookmark website list and will be checking back soon. Pls check out my web site as well and let me know what you think. Have you considered promoting your blog? add it to SEO Directory right now 🙂 http://www.links.m106.com

    Reply

  77. I think that is among the most vital info for me. And im satisfied studying your article. However wanna remark on few general things, The site style is perfect, the articles is really nice : D. Good job, cheers

    Reply

  78. Hallo, often excellent to determine other individuals via the hole world in my looking, I genuinely appreciate the time it should have taken to place together this awesome post. finest regards

    Reply

Leave a Comment