Mange APIer kan ikke hentes klientside pga. problematikk rundt CORS. Denne eksempelappen demonstrerer hvordan du kan hente data via CURL serverside og bruke de på klienten.
Last ned alle filer i en egnet katalog
Kjør npm install
Kjør node index for å starte appen
Åpne http://localhost:3000 i en nettleser
https://bit.ly/apimetno (kan ta 10-20 sekunder å svare fordi den kjører på en Heroku-instans som må "varmes opp").
| <!DOCTYPE html> | |
| <head> | |
| </head> | |
| <body> | |
| <p> | |
| Hent data fra api.met (forbigå CORS) | |
| <br/> | |
| Kildekode er tilgjengelig <a href="https://gist.github.com/svenanders/d67a5d637314959a584520d343f8ca03">her</a>. | |
| </p> | |
| <form id="geo"> | |
| <p> | |
| <input id="lon" placeholder="10.58"> | |
| </p> | |
| <p> | |
| <input id="lat" placeholder="9"> | |
| </p> | |
| <p> | |
| <input type="button" value="Get data" onClick="getData()"> | |
| </p> | |
| </form> | |
| <div id="data"></div> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script> | |
| <script type="text/javascript"> | |
| function getData(){ | |
| const request = new Request('/data', { | |
| method: 'POST', | |
| body: JSON.stringify({ | |
| lat: document.getElementById('lat').value, | |
| lon: document.getElementById('lon').value | |
| }), | |
| headers: new Headers({ | |
| 'Accept': 'application/json, text/plain, */*', | |
| 'Content-Type': 'application/json' | |
| }) | |
| }); | |
| fetch(request) | |
| .then(res => res.text()) | |
| .then(data => document.querySelector('#data').textContent=data) | |
| } | |
| </script> | |
| </body> |
| const express = require('express'); | |
| const curl = require('curlrequest'); | |
| const bodyParser = require('body-parser') | |
| const port = process.env.PORT || 3000; | |
| const app = express(); | |
| const getData = (coords) => new Promise(resolve => { | |
| const lat = coords.lat || '60.10'; | |
| const lon = coords.lat || '9.58'; | |
| curl.request({ url: `http://api.met.no/weatherapi/locationforecast/1.9/?lat=${lat};lon=${lon};msl=70`, pretend: false}, function (err, stdout, meta) { | |
| resolve(stdout); | |
| }); | |
| }) | |
| app.post('/data', bodyParser.json(), (req, res) => { | |
| res.set('Content-Type', 'text/plain'); | |
| getData(req.body).then(res.send.bind(res)); | |
| }); | |
| app.get('/', (req, res) => { | |
| res.sendFile(__dirname + '/index.html'); | |
| }) | |
| app.listen(port, function () { | |
| console.log(`Appen kjører på http://localhost:${port}`); | |
| }); |
| { | |
| "name": "nodecurl", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "index.js", | |
| "scripts": { | |
| "start": "node index" | |
| }, | |
| "keywords": [], | |
| "author": "Sven Anders Robbestad <robbestad@gmail.com> (http://svenardo.com)", | |
| "license": "ISC", | |
| "dependencies": { | |
| "body-parser": "^1.15.2", | |
| "curlrequest": "^1.0.0", | |
| "express": "^4.14.0" | |
| } | |
| } |