Bieži vien, izstrādājot API, izmantojot Vue un AWS API vārteju, jūs saskaraties ar visuresošu problēmu: trūkst CORS galvenes. Tas var radīt neskaidrības un sasprindzinājumu, it īpaši, ja jūsu lietojumprogramma pilnībā paļaujas uz API. Kopumā šis šķērslis ir ļoti svarīgs, lai nodrošinātu netraucētu API integrāciju.
CORS jeb Cross-Origin Resource Sharing ir mehānisms, kas izmanto papildu HTTP galvenes, lai ļautu pārlūkprogrammai piekļūt resursiem no cita avota (domēna, protokola vai porta), nevis savas. Citiem vārdiem sakot, tas ļauj tīmekļa lietojumprogrammai vienā domēnā piekļūt resursiem no cita domēna. Šī funkcija ir ļoti svarīga, lai ierobežotu pieprasījumus, kas varētu apdraudēt drošību.
// Example code indicating a CORS issue
const app = express();
app.get('/no-cors', (req, res) => {
res.json({
text: 'You should not see this via a CORS request.'
});
});
Risinājums problēmai “Trūkst CORS galvenes”.
Šīs problēmas risinājums ir salīdzinoši vienkāršs: Vue lietojumprogrammā un API vārtejas iestatījumos skaidri iespējojiet CORS. Konkrēti, jums ir jāpielāgo daži iestatījumi savā Vue projektā un AWS API vārtejā.
// Example of enabling CORS in Vue
const app = express();
const cors = require('cors');
app.use(cors());
Soli pa solim koda skaidrojums
Soli pa solim sadalīsim kodu:
- Pirmais solis ir ātrās bibliotēkas importēšana, kas ir Node.js tīmekļa lietojumprogrammu ietvars.
- Pēc tam tiek importēta Cors bibliotēka. Šī Node.js pakotne nodrošina Express/Connect starpprogrammatūru, lai iespējotu CORS ar dažādām opcijām.
- Visbeidzot, funkcijas app.use(cors()) izsaukums izmanto cors starpprogrammatūru visiem ceļiem un HTTP darbības vārdiem (GET, POST utt.). Tas iespējo CORS visai lietojumprogrammai.
Darbs ar CORS galvenēm AWS API vārtejā
Pēc problēmas atrisināšanas savā Vue lietojumprogrammā ir pienācis laiks pievērsties AWS. AWS API vārtejai ir galvenes, kas īpaši izstrādātas CORS pieprasījumu pieņemšanai. Lai tos iespējotu:
- Pārejiet uz AWS API vārtejas konsoli.
- Izvēlieties API, kas jums rada problēmas.
- Atlasiet nolaižamo izvēlni "Darbības" un pēc tam izvēlieties "Iespējot CORS".
- Visbeidzot, vēlreiz izvietojiet savu API, lai atspoguļotu šīs izmaiņas.
Nobeigumā jāsaka, ka, lai gan sākumā tas bija biedējoši, problēma “Trūkst CORS galvenes” ir viegli atrisināma problēma, izstrādājot API, izmantojot Vue un AWS API vārteju. Tam nepieciešama izpratne par Express starpprogrammatūru, jo īpaši CORS, un zināšanas par AWS iestatījumiem. Kā vienmēr izstrādes laikā, neaizmirstiet rūpīgi pārbaudīt savu lietojumprogrammu pēc šo labojumu ieviešanas, lai nodrošinātu, ka netiek negatīvi ietekmētas citas jomas. Tādējādi jums vajadzētu būt labā ceļā, lai maksimāli izmantotu Vue API integrācijas.
