I want to use Ionic's Proxies feature in an Ionic Vuejs project.
I have seen questions and answers for proxy problems with Ionic + Angular, and for Vue + Webpack, but couldn't find a solution for my Ionic + Vue problem.
For now I am just working in a browser (i.e. and not building for native yet).
I followed the instructions, and my ionic.config.json now looks like this:
{
"name": "myapp",
"integrations": {
"capacitor": {}
},
"type": "vue",
"proxies": [
{
"path": "/webhp",
"proxyUrl": "https://www.google.com"
}
]
}
I run ionic serve --no-open and browse to http://localhost:8100/webhp.
The request is not proxied, my app is loaded, and I get a router error: [Vue Router warn]: No match found for location with path "/goto".
When I try to access that URL using an AJAX request in my code:
await axios.post("/webhp");
I get an error:
I am using Ionic CLI 6.12.2 and Ionic Framework #ionic/vue 5.5.2.
What am I doing wrong?
Got it finally up and running.
I added a vue.config.js with the devServer Section as I always did in "normal" vue projects.
ionic serve no starts with the wanted proxy configuration and my backend is proxied to the given address.
This my vue.config.js I added:
module.exports = {
runtimeCompiler: true,
devServer: {
proxy: {
'/api': {
target: 'http://ionicfez:8888/',
changeOrigin: true,
logLevel: 'info'
}
}
},
publicPath: './',
outputDir: 'dist',
assetsDir: 'assets'
}
This is my ionic.config.json
{
"name": "ionicfez",
"integrations": {
"capacitor": {}
},
"type": "vue"
}
My project is structured as
/ionicfez
/public
/api
/hello.php
/src
...
And this is a simple test function in my .vue file, that now is proxied
init() {
this.axios
.get("public/api/hello.php")
.then(result => {
console.log(result)
})
.catch(error => console.error(error))
}
I mentioned in a comment that I implemented a workaround using nginx, and was asked for details, so I am posting it as an answer.
In my setup, I have nginx listening on port 8888 and the Webpack Dev Server listening on port 8100.
I access the website via port 8888, e.g. http://local.mydomain.com:8888/.
My nginx configuration looks like this:
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;
}
Requests for paths that begin with /x/ go to index.php.
All other requests get proxied to Webpack on port 8100.
The rest of the configuration is not actually related to this proxy thing; I just included it to give a complete config.
My OS is window, and deploy VUE project on Nginx server.
Build VUE project
cd E:\test\test-project-frontend-demo
npm install && npm run build
config nginx:
nginx.conf
worker_processes 1024;
pid logs/nginx.pid;
events {
multi_accept on;
worker_connections 65535;
}
http {
#MIME
include mime.types;
default_type application/octet-stream;
#LOGGING
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log logs/access.log main;
error_log logs/error.log warn;
charset utf-8;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
server_tokens off;
log_not_found off;
types_hash_max_size 2048;
client_max_body_size 16M;
#keepalive_timeout 0;
keepalive_timeout 65;
gzip on;
#SITES
include sites-available/project.conf;
}
project.conf
server {
listen 80;
listen 443 ssl;
server_name project.testltd.com;
# security
include nginxconfig.io/security.conf;
# logging
access_log logs/project.access.log;
error_log logs/project.error.log warn;
# site project
location / {
alias E:/test/test-project-frontend-demo/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
# additional config
include nginxconfig.io/general.conf;
# ssl config
include nginxconfig.io/self-signed.conf;
include nginxconfig.io/ssl-params.conf;
}
start nginx:
nginx.exe -c conf/nginx.conf
index.html can be access , and response is 200, but static file like css and js can not be accessed, Why?
I've Vue project here is my path vue in Ubuntu 18.04
/var/www/html/vue/{ project here }
the problem is my css path are /css which refer to /var/www/html/css
How to set up my css in vue project refer in folder here is my nginx setup
server {
listen 80 default_server;
listen [::]:80 default_server;
listen 443 ssl;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
location /vue {
// I try to make root path but It's not workking error 500 when I uncomment #root
#root /var/www/html/vue;
try_files $uri $uri/ /vue/index.html;
}
}
You can try the following with your current config:
location /css {
alias /var/www/html/css;
}
I've been struggling on a problem with a docker-compose environment where a Single Page Application should talk to a PHP api. Preferrably laravel.
My approach is to have nginx act as a reverve proxy for both.
However, every time i try to hit the /api route, it says file not found. the php-fpm do recieve the request, but it apparantly fails to load the index, even tough it is in the specified folder.
My docker-compose.yml looks like this.
version: "3.1"
services:
redis:
image: redis:alpine
container_name: apitest-redis
postgres:
image: postgres:9.6-alpine
container_name: apitest-postgres
working_dir: /application/api
volumes:
- ./api:/application/api
environment:
- POSTGRES_USER=myapiuser
- POSTGRES_PASSWORD=2cr34m1ng#n4k3d
- POSTGRES_DB=test
webserver:
image: nginx:alpine
container_name: apitest-webserver
working_dir: /application
volumes:
- ./client/dist:/application/dist
- ./api:/application/api
- ./docker/nginx/nginx.conf:/etc/nginx/conf.d/default.conf
ports:
- "8080:80"
php-fpm:
build: docker/php-fpm
container_name: apitest-php-fpm
working_dir: /application/api
volumes:
- ./api:/application/api
- ./docker/php-fpm/php-ini-overrides.ini:/etc/php/7.2/fpm/conf.d/99-overrides.ini
And my nginx.conf looks like this:
server {
listen 80 default;
client_max_body_size 108M;
access_log /var/log/nginx/application.access.log;
root /application;
index index.html index.php;
location / {
root /application/dist;
try_files $uri /index.html;
}
location /api {
root /application/api/public;
try_files $uri /index.php?$query_string;
}
location ~ \.php$ {
fastcgi_pass apitest-php-fpm:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PHP_VALUE "error_log=/var/log/nginx/application_php_errors.log";
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
include fastcgi_params;
}
}
I configure my nginx for a https service, but it does not work. The chrome showed error "ERR_SSL_VERSION_OR_CIPHER_MISMATCH". It's seemed like that the browser want an ssl protocol that my nginx can't support? However, I followed the official document from where I got the CA to configure my nginx.conf file as below.
I run curl https://ltp-cloud.com and get error "curl: (35) error:14077410:SSL routines:SSL23_GET_SERVER_HELLO:sslv3 alert handshake failure"
There is my nginx.conf:
```
user www-data;
worker_processes 4;
pid /var/run/nginx.pid;
events {
worker_connections 768;
# multi_accept on;
}
http {
server {
listen 443;
server_name ltp-cloud.com;
ssl on;
root html;
index index.html index.htm;
ssl_certificate /etc/nginx/ssl/cert/214234087720826.pem;
ssl_certificate_key /etc/nginx/ssl/cert/214234087720826.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
root html;
index index.html index.htm;
}
}
}
My Nginx version is below and I checked that "--with-http_ssl_module" option is on.
➜ nginx nginx -V
nginx version: nginx/1.4.6 (Ubuntu)
built by gcc 4.8.4 (Ubuntu 4.8.4-2ubuntu1~14.04.3)
TLS SNI support enabled
configure arguments: --with-cc-opt='-g -O2 -fstack-protector --param=ssp-buffer-size=4 -Wformat -Werror=format-security -D_FORTIFY_SOURCE=2' --with-ld-opt='-Wl,-Bsymbolic-functions -Wl,-z,relro' --prefix=/usr/share/nginx --conf-path=/etc/nginx/nginx.conf --http-log-path=/var/log/nginx/access.log --error-log-path=/var/log/nginx/error.log --lock-path=/var/lock/nginx.lock --pid-path=/run/nginx.pid --http-client-body-temp-path=/var/lib/nginx/body --http-fastcgi-temp-path=/var/lib/nginx/fastcgi --http-proxy-temp-path=/var/lib/nginx/proxy --http-scgi-temp-path=/var/lib/nginx/scgi --http-uwsgi-temp-path=/var/lib/nginx/uwsgi --with-debug --with-pcre-jit --with-ipv6 --with-http_ssl_module --with-http_stub_status_module --with-http_realip_module --with-http_addition_module --with-http_dav_module --with-http_geoip_module --with-http_gzip_static_module --with-http_image_filter_module --with-http_spdy_module --with-http_sub_module --with-http_xslt_module --with-mail --with-mail_ssl_module --add-module=/build/nginx-hzyca8/nginx-1.4.6/debian/modules/nginx-auth-pam --add-module=/build/nginx-hzyca8/nginx-1.4.6/debian/modules/nginx-dav-ext-module --add-module=/build/nginx-hzyca8/nginx-1.4.6/debian/modules/nginx-echo --add-module=/build/nginx-hzyca8/nginx-1.4.6/debian/modules/nginx-upstream-fair --add-module=/build/nginx-hzyca8/nginx-1.4.6/debian/modules/ngx_http_substitutions_filter_module
Request your help on this.
Thanks!