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

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

2 голосов
/ 28 марта 2020

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

1 голос
/ 28 марта 2020

Прокси-сервер devServer проверяет каждый путь перед маршрутизацией и перенаправляет любые совпадения. Правило в вашем примере - проксирование любых запросов к пути /api, включая любую строку, которая идет после него. Таким образом, предполагая, что ваш Vue CLI devServer работает на порте 8080, это правило будет соответствовать любым запросам, которые вы отправляете на URL, например:

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

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

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

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

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

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

...