Question

我有一个带有net.core后端的VUE应用程序。

为避免CORS问题，我想在所有通话中使用代理。但是，由于没有办法代理我的电话，所以我的尝试没有用。

应用程序是使用vue CLI 3创建的，并使用了打字稿。

我尝试将下一行添加到package.json中，但是代理仍然无法正常工作。每个呼叫都是在同一台服务器上进行的，不会被代理。

"proxyTable": {
    "/api":{
      "target": "http://localhost:5000",
      "changeOrigin": true,
      "pathRewrite": {
        "^/api": ""
      }
    }
  },

"proxy": {
    "/api":"http://localhost:5000"
      }

这些线路中没有一条会更改呼叫端口。

Axios呼叫例如：

Axios.post(process.env.VUE_APP_BASE_URI + 'me', { }, {withCredentials: true})

其中常量的定义如下：

VUE_APP_BASE_URI=api/

不断的工作，我可以使用它。没有常量，错误是相同的。

我编写代理的方式是否有问题，还是还有其他问题？

我的package.json：

{
  "name": "xxxxxx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "proxyTable": {
    "/api":{
      "target": "http://localhost:5000",
      "changeOrigin": true,
      "pathRewrite": {
        "^/api": ""
      }
    }
  },
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap-vue": "^2.0.0-rc.11",
    "font-awesome": "^4.7.0",
    "register-service-worker": "^1.0.0",
    "vue": "^2.5.17",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^7.0.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0",
    "@vue/cli-plugin-pwa": "^3.0.0",
    "@vue/cli-plugin-typescript": "^3.0.0",
    "@vue/cli-service": "^3.0.0",
    "typescript": "^3.0.0",
    "vue-template-compiler": "^2.5.17"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

其中一项尝试是使用this page中的建议，但没有运气。

我也读过：

Proxy in package.json not affecting fetch request

但是我有一个反应应用程序可以工作。但不是在这个VUE中。

编辑

根据一个答案，我添加了这个文件：

// vue.config.js
export const devServer = {
    proxy: {
        '/app': {
            target: 'http://localhost:5000/app/',
            ws: true,
            changeOrigin: true
        },
        '/api': {
            target: 'http://localhost:5000/app/api/',
            ws: true,
            changeOrigin: true
        }
    }
};

仍然，没有代理正在工作。

这也不起作用：

  module.exports = {
    devServer: {
      proxy: 'http://localhost:5000/app/'
    }
  }

Answer 1

使用Vue CLI工具时，您没有在package.json文件中设置代理信息，而是在vue.config.js文件中设置了代理信息。 https://cli.vuejs.org/config/#devserver-proxy

上有关于它的文档

如果您没有vue.config.js文件，只需创建它

这是正确的语法

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://4.3.2.1:8765',
        ws: true,
        changeOrigin: true,
      },
    },
  },
}

package.json中包含的代理不起作用

编辑

1 个答案: