Какой смысл использовать прокси в моем файле vue.config?

Я немного сбит с толку тем, что делает proxy '^/api' в моем vue.config.js . Когда я делаю запрос axios из формы http-common.js интерфейса, я знаю, что он обрабатывается моими 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, например:

Ни один из указанных выше запросов не отправляется по пути /api , поэтому ваше правило никогда не запускается вашим приложением. Если это так, свойство target указывает путь для перенаправления, а devServer также добавляет сопоставленную часть в конец целевого пути. Итак, приведенные выше примеры будут перенаправлены на:

Цель + соответствующая часть. В этом случае: никакого перенаправления вообще (и фактически вызывает цикл перенаправления).

Вместо этого вы можете отправить запросы на другой target путь и переписать часть этого пути любым pathRewrite вас способом (или удалить его), используя pathRewrite . В вашем примере pathRewrite также ничего не делает, переписывая строку '/api' как '/api' .

Таким образом, нет никаких причин использовать этот прокси, и вы можете удалить его.

Одно из применений прокси - это возможность отправлять запросы на относительный URL-адрес, такой как '/api' который работает как на производстве, так и в разработке. В производственной среде, когда приложение работает на сервере, на котором также размещается API, этот относительный путь действительно существует, и поэтому приложение просто работает. В процессе разработки, где у вас есть Vue CLI devServer на 8080 и, например, сервер Node на 3000, приложение все еще работает, перенаправляя эти относительные запросы URL-адресов с devServer на Node.

Это хорошо, потому что тогда вам не нужно связываться с переменными .env baseURL или .env или абсолютными путями только для того, чтобы ваши API-запросы работали.


Есть идеи?

10000