生产中的Vue CORS

Question

我是Vue的初学者，现在我正在与CORS问题作斗争。在开发我的应用程序（http://localhost:8080/）时，向http://zz.zz.zz.zz:3000/发送请求，这些代码帮助我修复了CORS：

vue.config.js

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

但当我的应用程序在生产（http://zz.zz.zz.zz:3001/）发送请求http://zz.zz.zz.zz:3000/它会得到CORS错误。我尝试了下面的代码，但没有任何变化。我做错了什么？

.环境。生产

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

组件中的请求示例：

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(...)

（服务器上允许使用COR）

这是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"
  }
}

Answer 1

如果出现CORS错误，这意味着您的后端没有启用CORS或配置错误。=

Answer 2

使用vue axios cors

import Vue from 'vue'
import AxiosPlugin from 'vue-axios-cors';
 
Vue.use(AxiosPlugin)

然后，您可以像通常一样在项目中使用axios。