Hur man åtgärdar CORS-felet i WordPress? (Enkel guide)

Om du driver en webbplats är det oundvikligt att stöta på fel, och ett sådant problem, även om det inte är bland de vanliga WordPress-felen, är CORS-felet.

Det här felet uppstår när din WordPress-webbplats försöker komma åt resurser från ett annat ursprung (domän, protokoll eller port), och servern som är värd för dessa resurser inte tillåter det. 

Att lösa CORS-fel är avgörande, eftersom de kan störa viktiga funktioner som API-anrop, inläsning av teckensnitt och AJAX-förfrågningar, vilket negativt påverkar webbplatsens prestanda och användarupplevelse.

Den här guiden ger en översikt över steg du kan vidta för att identifiera och åtgärda CORS-fel i WordPress, vilket säkerställer att din webbplats förblir funktionell och användarvänlig.

TL;DR: Lösa problem med resursdelning mellan ursprung (CORS)

• Det här felet visas när din webbplats begär resurser från en annan domän utan korrekt behörighetsrubriker. Webbläsare blockerar begäran för att skydda användarnas säkerhet.

• Det kan orsaka förstörelse av API-anrop, teckensnitt, CDN-tillgångar, AJAX-förfrågningar och inbäddade widgetar, vilket påverkar prestanda och användarupplevelse.

• Identifiera problemet med hjälp av webbläsarkonsolen och fliken nätverk. Leta efter blockerade förfrågningar och saknade Access-Control-Allow-Origin-rubriker.

• Åtgärda det genom att uppdatera serverinställningar, htaccess, temafunktioner, CDN-regler eller genom att kontakta resursleverantören för korrekt konfiguration.

Vad är ett CORS-fel?

Cross-Origin Resource Sharing (CORS) är en säkerhetsfunktion som implementeras av webbläsare för att förhindra att skadliga webbplatser får åtkomst till känslig information på andra webbplatser utan tillstånd.

Det fungerar genom att kontrollera om servern som är värd för resursen innehåller specifika rubriker som ger behörighet för begäranden mellan olika ursprung. 

Ett CORS-fel uppstår när en webbsida försöker komma åt resurser från en annan domän, ett annat protokoll eller en annan port, men servern inte tillåter det.

Typiska scenarier där CORS-fel uppstår i WordPress inkluderar:

• Hämta extern API-data: När din WordPress-webbplats försöker hämta data från ett externt API kan ett CORS-fel uppstå om API-servern inte tillåter din webbplats åtkomst till dess resurser.

• Läser in teckensnitt från en annan domän: Om du använder anpassade teckensnitt som finns på en annan domän kan du stöta på CORS-fel om teckensnittsservern inte tillåter din webbplats att läsa in dessa teckensnitt.

• Använda ett CDN för statiska resurser: När bilder, CSS- eller JavaScript-filer serveras från ett CDN kan CORS-fel uppstå om CDN- servern inte har rätt rubriker för att ge din webbplats åtkomst till dessa filer.

• Göra AJAX-förfrågningar: Om din WordPress-webbplats gör AJAX- förfrågningar till en anpassad REST API-slutpunkt på en annan underdomän kan CORS-fel uppstå om API-servern inte uttryckligen tillåter dessa förfrågningar.

• Bädda in widgetar från tredje part: Slutligen kan inbäddning av widgetar från andra domäner med hjälp av iframes leda till CORS-fel om widgetservern inte tillåter åtkomst mellan olika ursprung.

Hur påverkar CORS-fel webbplatsens funktionalitet och användarupplevelse?

CORS-fel kan blockera viktiga funktioner på din webbplats, till exempel inläsning av extern data, anpassade teckensnitt eller skript. Som ett resultat kan din webbplats eventuellt inte visas korrekt eller fungera fullt ut, vilket leder till en dålig användarupplevelse.

Till exempelkan funktioner som är beroende av externa API:er misslyckas, anpassade teckensnitt kanske inte laddas eller interaktiva element som använder AJAX kan sluta fungera.

Därför är det viktigt att åtgärda CORS-fel för att säkerställa att din webbplats fungerar smidigt och ger en sömlös användarupplevelse.

Identifiera CORS-fel i WordPress

Genom att följa dessa steg kan du enkelt identifiera CORS-fel på din WordPress-webbplats.

Kontrollera webbläsarkonsolen: Öppna webbläsarens utvecklarverktyg (genom att trycka på F12 eller högerklicka på sidan och välja "Inspektera"). Gå till fliken "Konsol" för att se eventuella felmeddelanden.

Leta efter meddelanden i konsolen som nämner "CORS-policy" eller "Cross-Origin Resource Sharing". Dessa meddelanden anger vanligtvis att en resurs har blockerats på grund av CORS.

I utvecklarverktygen, växla till fliken "Nätverk" och ladda om sidan.

• Leta efter förfrågningar markerade med rött, vilket indikerar att de har misslyckats.
• Klicka på dessa förfrågningar för att se mer information om felet, inklusive CORS-relaterade problem.

Granska API-svarsrubriker: När du arbetar med API:er, kontrollera svarsrubrikerna på fliken ”Nätverk”. Kontrollera om rubriken ”Access-Control-Allow-Origin” finns och är korrekt konfigurerad.

Kontrollera plugin-inställningar: Om du använder plugin-program som interagerar med externa resurser, granska deras inställningar och dokumentation för att säkerställa att de hanterar CORS korrekt.

Använd onlineverktyg: Använd verktyg som CORS Checker för att testa om de externa resurser du försöker komma åt är korrekt konfigurerade för att tillåta begäranden mellan olika ursprung.

Läs om: Tips för att åtgärda fel vid WordPress-uppdatering och publicering

Exempel på CORS-fel i WordPress och steg för att åtgärda dem

Här är några vanliga scenarier där CORS-fel uppstår i WordPress, tillsammans med enkla steg för att åtgärda dem.

Exempel 1: Hämta extern API-data

Din WordPress-webbplats försöker hämta data från ett externt API, men misslyckas.

Felmeddelande:

Åtkomst för att hämta på 'https://api.example.com/data' från ursprunget 'https://yourwordpresssite.com' har blockerats av CORS-policyn: Ingen 'Access-Control-Allow-Origin'-header finns på den begärda resursen.

Metod för att åtgärda problemet: Ändra .htaccess-filen i din WordPress-rotkatalog:

<IfModule mod_headers.c>Rubrikuppsättning Access-Control-Allow-Origin "*"</IfModule>

Detta anger att servern ska tillåta vilken webbplats som helst att komma åt resursen.

Läs också: Så här åtgärdar du 301-fel i WordPress

Exempel 2: Ladda teckensnitt från en annan domän

Din WordPress-webbplats använder anpassade teckensnitt som finns på en annan domän, men de laddas inte.

Felmeddelande:

Åtkomst till typsnittet på 'https://fonts.example.com/font.woff2' från ursprunget 'https://yourwordpresssite.com' har blockerats av CORS-policyn: Ingen 'Access-Control-Allow-Origin'-rubrik finns på den begärda resursen.

Metod för att åtgärda problemet: Lägg till följande kod i ditt temas functions.php-fil:

function add_cors_headers() { header("Tillåt-Ursprung-Åtkomstkontroll: *"); } add_action('init', 'add_cors_headers'); }

Detta hjälper till att lägga till de obligatoriska CORS-rubrikerna till alla svar.

Exempel 3: Använda ett CDN för statiska tillgångar

Din WordPress-webbplats visar bilder, CSS eller JavaScript-filer från ett CDN, men de är blockerade.

Felmeddelande:

Åtkomst till skriptet på 'https://cdn.example.com/script.js' från ursprunget 'https://yourwordpresssite.com' har blockerats av CORS-policyn: Rubriken 'Access-Control-Allow-Origin' innehåller flera värden '*, *', men endast ett är tillåtet.

Metod för att åtgärda problemet: Om du använder Apachekan du lägga till följande i din konfigurationsfil:

<IfModule mod_headers.c>Rubrikuppsättning Access-Control-Allow-Origin "*"</IfModule>

Om du använder Nginx, lägg till detta i din konfiguration:

plats / { add_header 'Tillåt-Ursprung-Åtkomstkontroll' '*'; }

Exempel 4: Göra AJAX-förfrågningar

Din WordPress-webbplats gör AJAX-förfrågningar till en anpassad REST API-slutpunkt på en annan underdomän, men de är blockerade.

Felmeddelande:

Åtkomst till XMLHttpRequest på 'https://api.yourwordpresssite.com/endpoint' från ursprunget 'https://yourwordpresssite.com' har blockerats av CORS-policyn: Svar på preflight-begäran klarar inte åtkomstkontrollen: Ingen 'Access-Control-Allow-Origin'-rubrik finns på den begärda resursen.

Metod för att åtgärda: Installera och aktivera pluginet Aktivera CORSoch konfigurera sedan inställningarna för att tillåta din underdomän.

Exempel 5: Bädda in tredjepartswidgetar

Din WordPress-webbplats bäddar in widgets från andra domäner med hjälp av iframes, men de laddas inte.

Felmeddelande:

Åtkomst till resursen på 'https://widget.example.com/' från ursprunget 'https://yourwordpresssite.com' har blockerats av CORS-policyn: Ingen 'Access-Control-Allow-Origin'-header finns på den begärda resursen.

Metod för att åtgärda problemet: Begär tredjepartsleverantören att lägga till din domän i deras Access-Control-Allow-Origin- header. Alternativt kan du försöka lägga till följande i din .htaccess-fil:

<IfModule mod_headers.c>Rubrikuppsättning Access-Control-Allow-Origin "*"</IfModule>

Lär dig mer om: Vad är 404-fel? Hur åtgärdar jag dem

Andra metoder för att lösa CORS-fel i WordPress

Här är några ytterligare metoder för att åtgärda CORS-fel och säkerställa sömlös funktionalitet på din WordPress-webbplats.

• Använda Cloudflare: Om du använder Cloudflare kan du konfigurera anpassade regler för att hantera CORS-headers via Cloudflare-instrumentpanelen. Cloudflare Workers kan också användas för att lägga till eller ändra headers när förfrågningar passerar genom deras nätverk.

• Ändra temats functions.php-fil: Ett annat sätt är att lägga till kod i temats functions.php-fil. Infoga följande kod för att aktivera 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: Content-Type, Authorization"); } add_action('init', 'add_cors_headers'); } ..

• Använda CORS-proxy: En CORS-proxy fungerar som en mellanliggande server som hanterar förfrågningar mellan din webbplats och den externa resursen. Den lägger till nödvändiga CORS-rubriker innan svaret vidarebefordras till din webbplats.

• Anpassad mellanprogramvara: Implementera anpassad mellanprogramvara på din server för att lägga till nödvändiga CORS-rubriker till svar. Detta kan göras med hjälp av skriptspråk på serversidan som PHP, Node.js eller Python.

• Tredjepartstjänster: Vissa tredjepartstjänster och API:er inkluderar inbyggt CORS-stöd. Kontrollera dokumentationen för den externa tjänsten för att se om den erbjuder alternativ för att aktivera CORS för din domän.

• Kontakta den externa serverleverantören: Kontakta leverantören av den externa resursen och be dem lägga till din domän i sin Access-Control-Allow-Origin- rubrik.

• Konfigurera serverinställningar: Du kan konfigurera dina serverinställningar för att åtgärda CORS-fel. Om du till exempel använder Apache kan du lägga till följande i din konfigurationsfil:

<IfModule mod_headers.c>Rubrikuppsättning Access-Control-Allow-Origin "*" Rubrikuppsättning Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" Rubrikuppsättning Access-Control-Allow-Headers "Innehållstyp, Auktorisering"</IfModule>

För Nginxkan du använda:

plats / { om ($request_method = 'ALTERNATIV') { add_header 'Tillåt-åtkomstkontroll-ursprung' '*'; add_header 'Tillåt-åtkomstkontroll-metoder' 'HÄMTA, POST, ALTERNATIV'; add_header 'Tillåt-åtkomstkontroll-rubriker' 'Innehållstyp, Auktorisering'; returnera 204; } add_header 'Tillåt-åtkomstkontroll-ursprung' '*'; }

Hur testar man om CORS-problemet är löst?

Uppdatera först din WordPress-webbplats för att se om ändringarna träder i kraft. Ibland kan en enkel omladdning avslöja om CORS-felet är åtgärdat.

• Kontrollera webbläsarkonsolen: Öppna webbläsarens utvecklarverktyg, gå till fliken ”Konsol” och leta efter eventuella CORS-relaterade felmeddelanden. Om det inte finns några kan problemet vara löst.

• Granska nätverksförfrågningar: Växla till fliken "Nätverk" i utvecklarverktygen och ladda om sidan. Kontrollera här om de tidigare misslyckade förfrågningarna har åtgärdats. Klicka också på dessa förfrågningar för att kontrollera om rätt rubriker är på plats.

• Testfunktionalitet: Kontrollera om funktioner som misslyckades på grund av CORS-fel, såsom API-anrop, teckensnittsinläsning eller AJAX-förfrågningar, nu fungerar som förväntat.

Du kan också använda CORS-kontrollverktyg online för att kontrollera om de externa resurser du ansluter till är korrekt konfigurerade för att tillåta begäranden mellan olika ursprung.

Lär dig: Hur man kör ett användbarhetstest på WordPress-webbplatser

Bästa praxis för CORS-konfiguration

Genom att följa dessa bästa metoder kan du konfigurera CORS säkert och säkerställa att din WordPress-webbplats förblir skyddad samtidigt som den fungerar smidigt.

• Tillåt specifika ursprung: Istället för att tillåta alla ursprung med ett jokertecken (*), ange exakt vilka ursprung som har åtkomst till dina resurser. Detta förbättrar säkerheten genom att begränsa åtkomsten till betrodda domäner.

• Begränsa tillåtna metoder: Tillåt endast de HTTP-metoder som din applikation kräver, till exempel GET, POST och OPTIONS. Detta minimerar risken för obehöriga åtgärder.

• Begränsa rubriker: Tillåt endast de specifika rubriker som din applikation behöver. Detta förhindrar onödig exponering av känslig information. Tillåt till exempel "Innehållstyp" och "Auktorisering" om de krävs.

• Använd preflight-förfrågningar: För förfrågningar som kan påverka serverdata, se till att preflight-förfrågningar används. Detta innebär att webbläsaren skickar en OPTIONS- förfrågan för att kontrollera behörigheter innan den faktiska begäran görs.

• Ange lämplig maxålder: Definiera Access-Control-Max-Age för att ange hur länge resultaten av en preflight-begäran kan cachas. Detta minskar antalet preflight-begäranden som servern hanterar, vilket förbättrar prestandan.

Slutligen, granska och övervaka regelbundet din CORS-konfiguration för att säkerställa att den uppfyller dina säkerhets- och funktionskrav. Uppdatera inställningarna allt eftersom din applikation utvecklas.

Vidare utbildning: WordPress databasprestandaoptimering

Vira in

Att åtgärda CORS-fel i WordPress är viktigt för att bibehålla funktionaliteten och användarupplevelsen på din webbplats.

Genom att förstå vanliga scenarier och tillämpa lämpliga åtgärder kan du effektivt lösa dessa problem.

Men om du fortsätter att stöta på problem eller om lösningarna verkar för komplicerade, tveka inte att söka professionell hjälp.

Professionella WordPress-supporttjänster kan erbjuda experthjälp och säkerställa att din webbplats fungerar smidigt utan CORS-relaterade störningar.

Vanliga frågor om WordPress CORS-fel