Sådan retter du en CORS-fejl i WordPress (nem guide)

Hvis du driver en hjemmeside, er det uundgåeligt at støde på fejl, og et sådant problem, selvom det ikke er blandt de almindelige WordPress-fejl, er CORS-fejlen.

Denne fejl opstår, når dit WordPress-websted forsøger at tilgå ressourcer fra en anden oprindelse (domæne, protokol eller port), og den server, der er vært for disse ressourcer, ikke tillader det. 

Det er afgørende at løse CORS-fejl, da de kan forstyrre vigtige funktioner såsom API-kald, indlæsning af skrifttyper og AJAX-anmodninger, hvilket kan påvirke dit websteds ydeevne og brugeroplevelse negativt.

Denne guide giver et overblik over de trin, du kan tage for at identificere og rette CORS-fejl i WordPress, så du sikrer, at dit websted forbliver funktionelt og brugervenligt.

TL;DR: Løsning af problemer med deling af ressourcer på tværs af oprindelsessteder (CORS)

• Denne fejl vises, når dit websted anmoder om ressourcer fra et andet domæne uden de korrekte tilladelsesheadere. Browsere blokerer anmodningen for at beskytte brugerens sikkerhed.

• Det kan ødelægge API-kald, skrifttyper, CDN-aktiver, AJAX-anmodninger og integrerede widgets, hvilket påvirker ydeevne og brugeroplevelse.

• Identificér problemet ved hjælp af browserkonsollen og netværksfanen. Kig efter blokerede anmodninger og manglende Access-Control-Allow-Origin-headere.

• Ret det ved at opdatere serverindstillinger, htaccess, temafunktioner, CDN-regler eller ved at kontakte ressourceudbyderen for korrekt konfiguration.

Hvad er en CORS-fejl?

Cross-Origin Resource Sharing (CORS) er en sikkerhedsfunktion, der implementeres af webbrowsere for at forhindre ondsindede websteder i at få adgang til følsomme oplysninger på andre websteder uden tilladelse.

Det fungerer ved at kontrollere, om serveren, der er vært for ressourcen, indeholder specifikke headere, der giver tilladelse til anmodninger på tværs af oprindelse. 

En CORS-fejl opstår, når en webside forsøger at få adgang til ressourcer fra et andet domæne, en anden protokol eller en anden port, men serveren ikke tillader det.

Typiske scenarier, hvor CORS-fejl opstår i WordPress, inkluderer:

• Hentning af eksterne API-data: Når dit WordPress-websted forsøger at hente data fra et eksternt API, kan der opstå en CORS-fejl, hvis API-serveren ikke tillader dit websted at få adgang til sine ressourcer.

• Indlæsning af skrifttyper fra et andet domæne: Hvis du bruger brugerdefinerede skrifttyper, der hostes på et andet domæne, kan du støde på CORS-fejl, hvis skrifttypeserveren ikke tillader dit websted at indlæse disse skrifttyper.

• Brug af et CDN til statiske aktiver: Når billeder, CSS- eller JavaScript-filer serveres fra et CDN, kan der opstå CORS-fejl, hvis CDN- serveren ikke har de korrekte headere, der giver dit websted adgang til disse filer.

• Foretagelse af AJAX-anmodninger: Hvis dit WordPress-websted foretager AJAX -anmodninger til et brugerdefineret REST API-slutpunkt på et andet underdomæne, kan der opstå CORS-fejl, hvis API-serveren ikke eksplicit tillader disse anmodninger.

• Integrering af tredjepartswidgets: Endelig kan integrering af widgets fra andre domæner ved hjælp af iframes føre til CORS-fejl, hvis widgetserveren ikke tillader adgang på tværs af oprindelser.

Hvordan påvirker CORS-fejl webstedets funktionalitet og brugeroplevelse?

CORS-fejl kan blokere vigtige funktioner på dit websted, såsom indlæsning af eksterne data, brugerdefinerede skrifttyper eller scripts. Som følge heraf vises dit websted muligvis ikke korrekt eller fungerer ikke fuldt ud, hvilket fører til en dårlig brugeroplevelse.

For eksempelkan funktioner, der er afhængige af eksterne API'er, fejle, brugerdefinerede skrifttyper indlæses muligvis ikke, eller interaktive elementer, der bruger AJAX, kan gå i stykker.

Derfor er det vigtigt at løse CORS-fejl for at sikre, at dit websted kører problemfrit og giver en problemfri brugeroplevelse.

Identificering af CORS-fejl i WordPress

Ved at følge disse trin kan du nemt identificere CORS-fejl på dit WordPress-websted.

Tjek browserkonsollen: Åbn din browsers udviklerværktøjer (ved at trykke på F12 eller højreklikke på siden og vælge "Inspicer"). Gå til fanen "Konsol" for at se eventuelle fejlmeddelelser.

I konsollen skal du kigge efter meddelelser, der nævner "CORS-politik" eller "Deling af ressourcer på tværs af oprindelse". Disse meddelelser angiver normalt, at en ressource er blevet blokeret på grund af CORS.

I udviklerværktøjerne skal du skifte til fanen "Netværk" og genindlæse siden.

• Se efter anmodninger markeret med rødt, der angiver, at de er mislykkedes.
• Klik på disse anmodninger for at se flere detaljer om fejlen, herunder CORS-relaterede problemer.

Gennemgå API-svarheadere: Når du arbejder med API'er, skal du kontrollere svarheaderne under fanen "Netværk". Kontroller, om headeren "Access-Control-Allow-Origin" er til stede og korrekt konfigureret.

Tjek plugin-indstillinger: Hvis du bruger plugins, der interagerer med eksterne ressourcer, skal du gennemgå deres indstillinger og dokumentation for at sikre, at de håndterer CORS korrekt.

Brug onlineværktøjer: Brug værktøjer som CORS Checker til at teste, om de eksterne ressourcer, du forsøger at få adgang til, er korrekt konfigureret til at tillade anmodninger på tværs af oprindelser.

Læs om: Tips til at rette fejl ved WordPress-opdatering og -udgivelse

Eksempler på CORS-fejl i WordPress og trin til at rette dem

Her er nogle almindelige scenarier, hvor CORS-fejl opstår i WordPress, sammen med enkle trin til at rette dem.

Eksempel 1: Hentning af eksterne API-data

Dit WordPress-websted forsøger at hente data fra en ekstern API, men det mislykkes.

Fejlmeddelelse:

Adgang til hentning på 'https://api.example.com/data' fra oprindelsesstedet 'https://yourwordpresssite.com' er blevet blokeret af CORS-politikken: Der findes ingen 'Access-Control-Allow-Origin'-header på den anmodede ressource.

Metode til løsning: Rediger .htaccess-filen i din WordPress-rodmappe:

<IfModule mod_headers.c>Headersæt Adgangskontrol-Tillad-Oprindelse "*"</IfModule>

Dette fortæller serveren, at den skal tillade ethvert websted at få adgang til ressourcen.

Læs også: Sådan retter du 301-fejl i WordPress

Eksempel 2: Indlæsning af skrifttyper fra et andet domæne

Dit WordPress-websted bruger brugerdefinerede skrifttyper, der hostes på et andet domæne, men de indlæses ikke.

Fejlmeddelelse:

Adgang til skrifttypen 'https://fonts.example.com/font.woff2' fra oprindelsesstedet 'https://yourwordpresssite.com' er blevet blokeret af CORS-politikken: Der findes ingen 'Access-Control-Allow-Origin'-header på den anmodede ressource.

Metode til løsning: Tilføj følgende kode til dit temas functions.php-fil:

function add_cors_headers() { header("Adgangskontrol-Tillad-Oprindelse: *"); } add_action('init', 'add_cors_headers'); }   * ..

Dette hjælper med at tilføje de nødvendige CORS-headere til alle svar.

Eksempel 3: Brug af et CDN til statiske aktiver

Dit WordPress-websted viser billeder, CSS eller JavaScript-filer fra et CDN, men de er blokeret.

Fejlmeddelelse:

Adgang til scriptet på 'https://cdn.example.com/script.js' fra oprindelsesstedet 'https://yourwordpresssite.com' er blevet blokeret af CORS-politikken: Headeren 'Access-Control-Allow-Origin' indeholder flere værdier '*, *', men kun én er tilladt.

Metode til løsning: Hvis du bruger Apache, kan du tilføje følgende til din konfigurationsfil:

<IfModule mod_headers.c>Headersæt Adgangskontrol-Tillad-Oprindelse "*"</IfModule>

Hvis du bruger Nginx, skal du tilføje dette til din konfiguration:

placering / { add_header 'Adgangskontrol-Tillad-Oprindelse' '*'; }

Eksempel 4: Foretagelse af AJAX-anmodninger

Dit WordPress-websted sender AJAX-anmodninger til et brugerdefineret REST API-slutpunkt på et andet underdomæne, men de er blokeret.

Fejlmeddelelse:

Adgang til XMLHttpRequest på 'https://api.yourwordpressite.com/endpoint' fra oprindelsen 'https://yourwordpressite.com' er blevet blokeret af CORS-politikken: Svar på forhåndskontrolanmodning består ikke adgangskontrol: Der findes ingen 'Access-Control-Allow-Origin'-header på den anmodede ressource.

Metode til løsning: Installer og aktiver plugin'et Aktiver CORS, og konfigurer derefter indstillingerne for at tillade dit underdomæne.

Eksempel 5: Integrering af tredjepartswidgets

Dit WordPress-websted integrerer widgets fra andre domæner ved hjælp af iframes, men de indlæses ikke.

Fejlmeddelelse:

Adgang til ressourcen på 'https://widget.example.com/' fra oprindelsen 'https://yourwordpresssite.com' er blevet blokeret af CORS-politikken: Der findes ingen 'Access-Control-Allow-Origin'-header på den anmodede ressource.

Metode til løsning: Bed tredjepartsudbyderen om at tilføje dit domæne til deres Access-Control-Allow-Origin- header. Alternativt kan du prøve at tilføje følgende til din .htaccess-fil:

<IfModule mod_headers.c>Headersæt Adgangskontrol-Tillad-Oprindelse "*"</IfModule>

Lær om: Hvad er 404-fejl? Hvordan retter jeg dem

Andre metoder til at løse CORS-fejl i WordPress

Her er nogle yderligere metoder til at løse CORS-fejl og sikre problemfri funktionalitet på dit WordPress-websted.

• Brug af Cloudflare: Hvis du bruger Cloudflare, kan du konfigurere brugerdefinerede regler til at administrere CORS-headere via Cloudflare-dashboardet. Cloudflare Workers kan også bruges til at tilføje eller ændre headere, når anmodninger passerer gennem deres netværk.

• Ændring af temaets functions.php-fil: En anden måde er ved at tilføje kode til dit temas functions.php-fil. Indsæt følgende kode for at aktivere CORS:

function add_cors_headers() { header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS"); header("Access-Control-Allow-Headers: Indholdstype, Godkendelse"); } add_action('init', 'add_cors_headers');

• Brug af CORS-proxy: En CORS-proxy fungerer som en mellemliggende server, der håndterer anmodninger mellem dit websted og den eksterne ressource. Den tilføjer de nødvendige CORS-headere, før svaret videresendes til dit websted.

• Brugerdefineret middleware: Implementer brugerdefineret middleware på din server for at tilføje de nødvendige CORS-headere til svar. Dette kan gøres ved hjælp af serverside-scripting-sprog som PHP, Node.js eller Python.

• Tredjepartstjenester: Nogle tredjepartstjenester og API'er inkluderer indbygget CORS-understøttelse. Tjek dokumentationen til den eksterne tjeneste for at se, om den giver muligheder for at aktivere CORS for dit domæne.

• Kontakt til den eksterne serverudbyder: Kontakt udbyderen af ​​den eksterne ressource, og anmod om, at de tilføjer dit domæne til deres Access-Control-Allow-Origin- header.

• Konfiguration af serverindstillinger: Du kan konfigurere dine serverindstillinger for at rette CORS-fejl. Hvis du f.eks. bruger Apache, kan du tilføje følgende til din konfigurationsfil:

<IfModule mod_headers.c>Header-sæt Access-Control-Allow-Origin "*" Header-sæt Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" Header-sæt Access-Control-Allow-Headers "Indholdstype, Authorization"</IfModule>

For Nginxkan du bruge:

placering / { hvis ($request_method = 'MULIGHEDER') { add_header 'Adgangskontrol-Tillad-Oprindelse' '*'; add_header 'Adgangskontrol-Tillad-Metoder' 'HENT, POST, MULIGHEDER'; add_header 'Adgangskontrol-Tillad-Headers' 'Indholdstype, Godkendelse'; return 204; } add_header 'Adgangskontrol-Tillad-Oprindelse' '*'; }

Hvordan tester man, om CORS-problemet er løst?

Opdater først dit WordPress-websted for at se, om ændringerne træder i kraft. Nogle gange kan en simpel genindlæsning afsløre, om CORS-fejlen er rettet.

• Tjek browserkonsollen: Åbn din browsers udviklerværktøjer, gå til fanen "Konsol", og se efter eventuelle CORS-relaterede fejlmeddelelser. Hvis der ikke er nogen, kan problemet være løst.

• Gennemgå netværksanmodninger: Skift til fanen "Netværk" i udviklerværktøjerne, og genindlæs siden. Her skal du kontrollere, om de tidligere mislykkede anmodninger er blevet rettet. Klik også på disse anmodninger for at kontrollere, om de korrekte headere er på plads.

• Testfunktionalitet: Kontroller, om de funktioner, der fejlede på grund af CORS-fejl, såsom API-kald, indlæsning af skrifttyper eller AJAX-anmodninger, nu fungerer som forventet.

Du kan også bruge online CORS-kontrolværktøjer til at kontrollere, om de eksterne ressourcer, du tilgår, er korrekt konfigureret til at tillade anmodninger på tværs af oprindelser.

Lær: Sådan kører du en brugervenlighedstest på WordPress-websteder

Bedste praksis for CORS-konfiguration

Ved at følge disse bedste fremgangsmåder kan du konfigurere CORS sikkert og sikre, at dit WordPress-websted forbliver beskyttet, samtidig med at det fungerer problemfrit.

• Tillad specifikke oprindelser: I stedet for at tillade alle oprindelser med et jokertegn (*), skal du angive de præcise oprindelser, der har tilladelse til at få adgang til dine ressourcer. Dette forbedrer sikkerheden ved at begrænse adgangen til betroede domæner.

• Begræns tilladte metoder: Tillad kun de HTTP-metoder, som din applikation kræver, f.eks. GET, POST og OPTIONS. Dette minimerer risikoen for uautoriserede handlinger.

• Begræns overskrifter: Tillad kun de specifikke overskrifter, som din applikation har brug for. Dette forhindrer unødvendig eksponering af følsomme oplysninger. Tillad f.eks. "Indholdstype" og "Godkendelse", hvis de er påkrævet.

• Brug forhåndskontrolanmodninger: For anmodninger, der kan påvirke serverdata, skal du sørge for, at forhåndskontrolanmodninger bruges. Dette indebærer, at browseren sender en OPTIONS- anmodning for at kontrollere tilladelser, før den faktiske anmodning foretages.

• Indstil passende maksimal alder: Definer Access-Control-Max-Age for at angive, hvor længe resultaterne af en forhåndskontrolanmodning kan cachelagres. Dette reducerer antallet af forhåndskontrolanmodninger, som din server håndterer, hvilket forbedrer ydeevnen.

Endelig skal du regelmæssigt gennemgå og overvåge din CORS-konfiguration for at sikre, at den opfylder dine sikkerheds- og funktionalitetskrav. Opdater indstillingerne, efterhånden som din applikation udvikler sig.

Yderligere læring: WordPress Database Performance Optimization

Afslutning

Det er vigtigt at rette CORS-fejl i WordPress for at opretholde funktionaliteten og brugeroplevelsen på dit websted.

Ved at forstå almindelige scenarier og anvende de passende løsninger kan du effektivt løse disse problemer.

Men hvis du fortsat støder på problemer, eller hvis løsningerne virker for komplekse, så tøv ikke med at søge professionel hjælp.

Professionelle WordPress-supporttjenester kan tilbyde eksperthjælp og sikre, at dit websted kører problemfrit uden CORS-relaterede afbrydelser.

Ofte stillede spørgsmål om WordPress CORS-fejl