As a newcomer to Vue, I am currently grappling with a CORS issue in my application. During development at http://localhost:8080/, sending a request to , I was able to resolve the CORS problem using the following code snippet:
vue.config.js
module.exports = {
devServer: {
proxy: "http://zz.zz.zz.zz:3000/"
}
};However, when my app is in production mode at http://zz.zz.zz.zz:3001/, attempting to send a request to results in a CORS error. I tried the code below but saw no improvement. What could be going wrong?
.env.production & .env.development
VUE_APP_API_URL=http://zz.zz.zz.zz:3000/An example of a request in a 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",
...
}