我的 vue.config 文件中的代理有啥意义？

Posted 2023-02-22

【中文标题】我的 vue.config 文件中的代理有啥意义？

【英文标题】：What is the point of proxy in my vue.config file?我的 vue.config 文件中的代理有什么意义？

【发布时间】：2020-07-08 17:29:37

【问题描述】：

我对@9​​87654322@ 中的proxy '^/api' 的作用感到有些困惑。 当我从前端表单发出 axios 请求时，我知道它是由我的 http-common.js 和 tutorial_data_services.js 文件处理的。

我正在努力学习和理解这一点。有人可以提供建议吗？

vue.config.js

const path = require('path');

module.exports = 
    outputDir: path.resolve(__dirname, '../server/public'),
    devServer:
        proxy:
            '^/api': 
                target: 'http://localhost:8080',
                changeOrigin: true,
                secure:false,
                pathRewrite: '^/api': '/api',
                logLevel: 'debug' 
            
        
    

http-common.js

import axios from 'axios'

export default axios.create(
  baseURL: 'http://localhost:8080/',
  headers: 
    'Content-type': 'application/json'
  
)

tutorial_data_services.js

import http from '../http-common'

class TutorialDataService 
  getAll() 
    return http.get('/tutorials')
  

  get(id) 
    return http.get(`/tutorials/$id`)
  

  create(data) 
    return http.post('/tutorials', data)
  



export default new TutorialDataService()

【参考方案1】：

devServer 代理在路由之前检查每个路径并重定向任何匹配项。您示例中的规则是将任何请求代理到 /api 路径，包括它之后的任何字符串。因此，假设您的 Vue CLI devServer 在端口 8080 上运行，此规则将匹配您发送到 URL 的任何请求，例如：

http://localhost:8080/api http://localhost:8080/api/subdirectory http://localhost:8080/api/*

您上面显示的所有请求都不会发送到/api 路径，因此您的应用目前永远不会触发此规则。如果是，target 属性指定要重定向到的路径，并且 devServer 还将匹配的部分附加到目标路径的末尾。因此，上面的示例将重定向到： p>

http://localhost:8080/api http://localhost:8080/api/subdirectory http://localhost:8080/api/*

目标 + 匹配部分。在这种情况下：没有任何重定向（实际上会导致重定向循环）。

您可以将请求发送到另一个 target 路径，并且您可以使用 pathRewrite 以任何您喜欢的方式重写该路径的一部分（或删除它）。在您的示例中，pathRewrite 也什么都不做，将字符串 '/api' 重写为 '/api'。

因此没有理由使用此代理，您可以将其删除。

代理的一个用途是让您将请求发送到在生产和开发中都可以使用的相对 URL，例如 '/api'。在生产环境中，当应用程序在也托管 API 的服务器上运行时，该相对路径实际上存在，因此应用程序可以正常工作。在开发中，如果 Vue CLI devServer 位于 8080，例如，Node 服务器位于 3000，应用程序仍然可以工作，方法是将这些相对 URL 请求从 devServer 重定向到 Node。

这很好，因为这样您就不必为了让您的开发 API 请求正常工作而使用 axios baseURL 或 .env 变量或绝对路径。

【讨论】：

感谢您的宝贵时间和回答。这非常清晰易懂且很有帮助！