Междоменное решение Vue-cli 3.x + axios

Vue.js

источник

В недавнем экспериментальном классе мне нужно отрефакторить проект (кучу мусора), который я написал ранее, и мне нужно добавить функцию напоминаний по электронной почте.Я помню, что я писал версию PHP раньше, поэтому я хочу организовать функции, написанные на PHP в службу, а затем во внешний вызов. Но этот проект — JavaWeb, а это значит, что мне нужно решать междоменные проблемы. Однако эта статья не о том, как решить такую ​​междоменную проблему, а о яме, с которой я столкнулся на пути поиска решения этой проблемы.

На самом деле, теперь, когда фронтенд-инжиниринг популярен, фронтенд и бэкенд были разделены.Чтобы повысить эффективность рабочего процесса, фронтэнд часто запускает небольшой сервер, напримерwebpack.devServer. Таким образом, когда внешний интерфейс вызывает внутренний интерфейс, он неизбежно столкнется с междоменными проблемами. Как название,Vue-cli 3.x + axios 跨域方案Здесь нужно решить междоменную проблему. Перекрестный домен здесь основан наwebpackПрокси-функция (прокси) devServer для достижения кросс-доменности в среде разработки, то есть эта статья не решает междоменную проблему в производственной среде, потому что webpack.devServer является DevDependencies, когда-то упакованным онлайн, этот прокси-прокси не работает. Но это не мешает нам использовать кроссдоменность в нашей разработке для повышения эффективности разработки и опыта.

начать заполнение

На самом деле решить эту проблему очень просто, и туториалов в интернете много.Для полноты статьи я также сделаю максимально полную презентацию, и познакомлю как настроить Vue-cli 3.x для достижения междоменного.

Анализ конфигурации devServer.proxy в vue.config.js

Vue-cli3.x намного проще, чем проект, созданный Vue-cli2.x../srcа также./publicпапка, так много учебных пособий в Интернете говорятconfigв каталогеvue.config.jsГоворят, версия vue-cli 2.x. Затем для версии Vue-cli 3.x сборка также очень проста, просто создайте ее прямо в корневом каталоге.vue.config.jsКонфигурационный файл в порядке, давайте посмотрим непосредственноdevServer.proxyкод в:

Адрес моего devServer здесь: localhost: 8080/, а адрес, который необходимо проксировать: localhost/index/phpinfo.php (я написал php-тест для междоменного использования, который возвращает «ОК»)

Ниже приведен прокси-объект, который необходимо настроить в соответствии с указанным выше адресом.

devServer : {
        proxy : {
            '/index' : {
                target : 'http://localhost/index',
                // ws : true,
                changeOrigin : true,
                pathRewrite : {
                    '^/index' : ''
                }
            }
        }
    }

Большинство руководств останавливаются здесь, но я сделаю здесь расширение, чтобы дать читателю представление о том, как работает конфигурация (следующее организовано изhttp-proxy-middlewareизописание нпмвнутри,http-proxy-middlewareЭто модуль npm, который является базовой реализацией принципа прокси).

         foo://example.com:8042/over/there?name=ferret#nose
         \_/   \______________/\_________/ \_________/ \__/
          |           |            |            |        |
       scheme     authority       path        query   fragment

Возьмите мою конфигурацию выше в качестве примера,'/index'этоkeyсуществуетhttp-proxy-middlewareЭто называетсяcontext- используется для решения того, какие запросы должны бытьtargetСоответствующий адрес хоста (здесьhttp://localhost/index) proxy, который может быть строкой, строкой, содержащей подстановочные знаки, или массивом, соответствующимpath matching(совпадение путей)wildcard path matching(совпадение пути с подстановочным знаком)multiple path matching(многолучевое согласование), и здесьpathОтносится к сегменту пути, указанному на рисунке выше.

Короче говоря, ключ должен соответствоватьpath, после совпаденияpath, он перенаправит запрос на прокси-хост, а адрес прокси-хостtargetСодержимое, соответствующее полю.

ЭтоpathRewritчто это значит? Как следует из названия, путь перезаписывается. поставить выкройку (вот^/index) соответствуетpathПереписать на соответствующий путь (вот'', что эквивалентно удалению соответствующего пути). В дополнение к удалению существуют также способы добавить базовый путь к исходному пути или переписать путь, который может ссылаться наhttp-proxy-middlewareизГлава option.pathRewrite, описанная npm.

Использование аксиом с Vue

Эта библиотека может использовать любой пакет ajax, возможны axios, jquery.ajax или vue-resource.

Используйте axios во Vue, в сети есть два метода, один добавлен в прототип axios Vue, также рекомендую второй способ:

npm install axios vue-axios

import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios,axios);

Основываясь на приведенной выше конфигурации прокси-сервера, я хочу, чтобы прокси-сервер успешно перенаправлялlocalhost/index/phpinfo.php, в экземпляре Vue axios нужно записать адрес доступа следующим образом:

this.axios.get('/index/phpinfo.php').then((res)=>{
        console.log(res);
      })

Давайте проанализируем, как эти коды работают в целом? Во-первых, аксиомы для доступа/index/phpinfo.php, это относительный адрес, поэтому реальный адрес доступа на самом делеlocalhost:8080/index/phpinfo.php,Однако/index/phpinfo.phpнастроено нами/index匹配到了 ，所以访问被proxy代理，那转发到哪个路径呢？ существуетpathRewrite, будем моделировать^/indexПуть очищается, поэтому окончательный путь доступаtarget+pathRewrite+ остаток, так чтоhttp://localhost/index++/phpinfo.php

яма

Может показаться, что даже если прокси настроен, он все равно не действует.

  • В большинстве случаев это происходит из-за того, что конфигурация вашего прокси-сервера не соответствует вашему пути доступа, или даже если он совпадает, переадресованный адрес неверен, а API, предоставленный бэкэндом, не работает.
  • Или посмотрите на Axios, вы используете правильную осанку?
  • Еще один момент, возможно вы видите, что url в возвращаемом ответе по-прежнему показывает локальный хост, но данные были возвращены нормально, что нормально, потому что локальный хост, который мы посещаем, изначально, но прокси перенаправляет запрос на новый адрес.

следовать за

Эта статья решает только междоменную проблему в среде разработки, а реальный онлайн не может быть междоменным.В настоящее время вот несколько решений:

  • Междоменный обратный прокси-сервер Nginx
  • JSONP
  • CORS

В следующий раз, когда мы будем обсуждать эту междоменную проблему, попытайтесь ее решить.

Категории