Как использовать прокси-сервер dev с Ionic + Vue?

Я хочу использовать функцию Ionic Proxies в проекте Ionic Vuejs.

Я видел вопросы и ответы по проблемам с прокси с Ionic + Angular и для Vue + Webpack, но не смог найти решение для моей проблемы с Ionic + Vue.

Пока я просто работаю в браузере (т.е. еще не строю для натива).

Я следовал инструкциям, и мой ionic.config.json теперь выглядит так :

{
    "name": "myapp",
    "integrations": {
        "capacitor": {}
    },
    "type": "vue",
    "proxies": [
        {
            "path": "/webhp",
            "proxyUrl": "https://www.google.com"
        }
    ]
}

Я запускаю ionic serve --no-open и перехожу к http://localhost:8100/webhp.

Запрос не проксируется, мое приложение загружено, и я получаю сообщение об ошибке маршрутизатора: [Vue Router warn]: No match found for location with path "/goto".

Когда я пытаюсь получить доступ к этому URL-адресу, используя запрос AJAX в своем коде:

await axios.post("/webhp");

Я получаю сообщение об ошибке:

введите здесь описание изображения

Я использую Ionic CLI 6.12.2 и Ionic Framework @ionic/vue 5.5.2.

Что я делаю не так?


ionic-framework vue.js ionic-cli
person obe    schedule 04.01.2021    source источник
comment
У меня такая же проблема - удалось ли вам с ней что-то сделать?   -  person Richard Shergold    schedule 07.01.2021
comment
@RichardShergold вроде как, но по-другому. Я отказался от использования сервера разработки Ionic в качестве прокси-сервера и вместо этого переключился на использование nginx. Итак, у меня есть nginx впереди, и он проксирует сервер Ionic dev или мой (PHP) сервер в соответствии с путем.   -  person obe    schedule 07.01.2021
comment
У меня точно такая же проблема с очень похожей настройкой. Я пытался получить ответ на форуме ionic, но до сих пор проблема не решена. Можете ли вы дать мне еще несколько советов о том, как использовать настройку с ngx?   -  person Michael    schedule 17.02.2021
comment
Я даже пытался использовать vue.config.js параллельно с ionic.config.json. Теперь консоль показывает мне, что прокси активирован, но он все еще не работает, когда я запускаю ioinic serve.   -  person Michael    schedule 17.02.2021
comment
@ Майкл, конечно, я разместил это здесь как ответ.   -  person obe    schedule 18.02.2021
comment
@obe Все заработало! Я только что добавил файл vue.config.js с содержимым: ... devServer: { proxy: { '/api': { target: 'ionicapp:8888', changeOrigin: true, logLevel: 'info' } } }, .... ionic.config.js больше не имеет прокси. Моя файловая структура похожа на /ionicapp/public/api/hello.php. Это php, я хочу позвонить со своим запросом. Итак, теперь я делаю в файле vue: this.axios .get(public/api/hello.php) ionic serve не запускается с прокси-сервисом   -  person Michael    schedule 18.02.2021

Ответы (2)


arrow_upward
0
arrow_downward

В комментарии я упомянул, что реализовал обходной путь с помощью nginx, и меня попросили предоставить подробности, поэтому я публикую его как ответ.

В моей настройке nginx прослушивает порт 8888, а Webpack Dev Server прослушивает порт 8100.

Я захожу на сайт через порт 8888, например. http://local.mydomain.com:8888/.

Моя конфигурация nginx выглядит так:

server {
    listen 8888;
    listen [::]:8888;

    root /home/user/mydomain/public;
    index index.php;

    server_name local.mydomain.com;

    location / {
            proxy_pass http://local.mydomain.com:8100/;
            proxy_set_header Host local.mydomain.com:8100;
    }

    location /x/ {
            add_header Access-Control-Allow-Origin "*";
            try_files $uri $uri/ /index.php?$args;
    }

    location ~ \.php$ {
            include snippets/fastcgi-php.conf;
            fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
            fastcgi_keep_conn on;
            fastcgi_split_path_info ^(.+?\.php)(/.*)$;
            if (!-f $document_root$fastcgi_script_name) {
                    return 404;
            }
            fastcgi_read_timeout 86400;
            include fastcgi_params;
    }

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    location ~ /\.ht {
            deny all;
    }

    access_log /var/log/nginx/local.mydomain.com.access.log;
    error_log /var/log/nginx/local.mydomain.com.error.log;
}

Запросы на пути, начинающиеся с /x/, идут на index.php.

Все остальные запросы перенаправляются в Webpack через порт 8100.

Остальная часть конфигурации на самом деле не связана с этим прокси; Я просто включил его, чтобы дать полную конфигурацию.

person obe    schedule 17.02.2021

arrow_upward
0
arrow_downward

Получил, наконец, и работает. Я добавил vue.config.js с разделом devServer, как всегда делал в обычных проектах vue.

ionic serve no запускается с желаемой конфигурацией прокси, и мой бэкэнд проксируется по указанному адресу.

Это мой vue.config.js, который я добавил:

module.exports = {
  runtimeCompiler: true,      
  devServer: {
    proxy: {
      '/api': {
        target: 'http://ionicfez:8888/',
        changeOrigin: true,
        logLevel: 'info'
      }
    }
  },

  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'assets'
}

Это мой ionic.config.json

{
  "name": "ionicfez",
  "integrations": {
    "capacitor": {}
  },
  "type": "vue"
}

Мой проект структурирован как

/ionicfez
  /public
    /api
      /hello.php
  /src
  ...

И это простая тестовая функция в моем файле .vue, которая теперь проксирована

init() {
  this.axios
    .get("public/api/hello.php")
    .then(result => {
      console.log(result)
    })
    .catch(error => console.error(error))
}
person Michael    schedule 18.02.2021