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

Posted 2023-02-22

【中文标题】package.json 中包含的代理不起作用

【英文标题】：Proxy included in package.json not working

【发布时间】：2019-01-28 19:53:16

【问题描述】：

我有一个具有 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/

不断的工作，我可以使用它。没有常数，错误是一样的。

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

我的 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】：

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

【讨论】：

可能你的答案是好的，根据文档你是正确的。我只能让它工作。我会尝试做一个minimal reproducible example，可能我的项目有问题...