代码之家 › 专栏 › 技术社区 › gbianchi

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

axios vuejs2 webpack javascript

gbianchi · 技术社区 · 8 年前

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

为了避免CORS问题,我希望在所有调用中使用代理。但是,我的尝试不起作用,因为我的呼叫无法被代理。

应用程序是使用vue CLI 3创建的,并使用typescript。

我尝试将下一行添加到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/

不断的工作,我可以使用它。如果没有常数,误差是相同的。

我写代理的方式有什么问题吗,还是有其他问题?

my 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

但我有一个react应用程序。但不是在这个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/'
    }
  }

1 回复 | 直到 7 年前

kraag22 7 年前

使用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,
      },
    },
  },
}