时间戳

首页 > 解决方案 > 我的 vue.config 文件中的代理有什么意义？

node.js - 我的 vue.config 文件中的代理有什么意义？

问题描述

我有点困惑proxy '^/api'我的vue.config.js作用。当我从前端表单发出 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()

标签： node.jsvue.jswebpackwebpack-dev-servervue-cli

解决方案

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

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

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

您可以改为将请求发送到另target一条路径，并且可以使用pathRewrite. 在您的示例pathRewrite中，通过将字符串重写'/api'为'/api'.

所以没有理由使用这个代理，你可以删除它。

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

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

推荐阅读