GeotrekCE / Geotrek-mobile

Cross-platform native app
https://geotrek.fr
BSD 2-Clause "Simplified" License
24 stars 10 forks source link

API URL V3 and language - configuration #201

Closed camillemonchicourt closed 5 years ago

camillemonchicourt commented 5 years ago

La nouvelle API mobile de Geotrek-admin (sync_mobile) créé un répertoire avec cette arborescence :

Dans environnement.ts, on a mis l'URL racine de ce répertoire de notre test : http://myserver/www/datamobilegte

Cependant cela nous donne de nombreuses erreurs quand on lance l'application :

Access to XMLHttpRequest at 'http://myserver/www/datamobilegte/treks.geojson' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Access to XMLHttpRequest at 'http://myserver/www/datamobilegte/settings.json' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

En plus du problème CORS, il cherche les fichiers directement à la racine de l'API, alors que ceux-ci sont dans les répertoires de chaque langue.

camillemonchicourt commented 5 years ago

Concernant le CORS, il faut voir du côté de https://ionicframework.com/docs/faq/cors et https://enable-cors.org/server_nginx.html

Concernant l'accès à l'API mobile, voir les ajouts à la doc de Geotrek-rando : https://github.com/GeotrekCE/Geotrek-rando/commit/efbe3c6e137bf18aa320518b07edf5f378c87e24#diff-857e0d1f55a07ffbd6721535158d51f0

Pour l'instant on n'a pas réussi à bien faire fonctionner la conf NGINX au niveau de Geotrek-rando.

camillemonchicourt commented 5 years ago

Pour le CORS, c'est finalement cette doc qui nous a permis de régler le problème : https://blog.elao.com/fr/infra/acceder-api-cross-domain-depuis-javascript-avec-cors-reverse-proxy-nginx/

En ajoutant dans la conf de Geotrek-rando :

location ~ ^/mobile/(.*)$ {
        .......
        # Ajouter les headers de contrôle d'accès CORS
        add_header    'Access-Control-Allow-Origin' '*' always;
        add_header    'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header    'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always;
        add_header    'Access-Control-Allow-Credentials' 'true' always;
    }

Et pour la gestion des langues, la documentation au niveau de Geotrek-rando ne fonctionnait pas chez nous, donc on a fait cette configuration au niveau de Geotrek-rando :

server {
    listen 80;
    server_name url_geotrek_rando;
    root /path_geotrek_rando/public;

    if ( $http_accept_language ~ ^(..) ) {
        set $lang $1;
    }

    if_modified_since before;
    expires 1h;

    gzip on;
    gzip_types text/text text/html text/plain text/xml text/css application/x-javascript application/javascript application/json;

    include mime.types;
    types {
        application/json geojson;
        application/gpx+xml gpx;
        application/vnd.google-earth.kmz kmz;
        font/ttf ttf;
        font/woff2 woff2;
    }

    location ~ ^/mobile/(.*)$ {
        root /my_data_path/datamobile/;
        try_files /$lang/$1 /nolang/$1 =404;
        # Ajouter les headers de contrôle d'accès CORS
        add_header    'Access-Control-Allow-Origin' '*' always;
        add_header    'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header    'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always;
        add_header    'Access-Control-Allow-Credentials' 'true' always;
    }

    location ~ ^/(api|media|static|zip|meta)/ {
        root /data_path/;
    }

    location / {
        try_files $uri @angular;

    }

    location @angular {
        if ($http_user_agent ~* "googlebot|yahoo|bingbot|baiduspider|yandex|yeti|yodaobot|gigabot|ia_archiver|facebookexternalhit|twitterbot|developers\.google\.com") {
            rewrite .* /meta/fr$request_uri/index.html last;
        }
        try_files /index.html =404;
    }
}

L'APK de test fonctionne et charge bien le contenu : https://geotrek.ecrins-parcnational.fr/ressources/technique/2019-05-RandoEcrins-V3.apk

camillemonchicourt commented 5 years ago

Concernant le CORS la configuration nécessaire au niveau de Geotrek-rando a été ajoutée à la doc : https://github.com/GeotrekCE/Geotrek-rando/commit/9e3ada0a30e9a0d5c92da622371af7304051d4af

Pour la partie langue, la conf NGINX indiquée au niveau de Geotrek-rando n'a pas fonctionné chez nous, on doit investiguer pourquoi.