javascript - Ingen 'Access-Control-Allow-Origin'-header finns på den begärda resursen. Ursprung '...' tillåts därför inte åtkomst

Jag använder .htaccess för att skriva om URL:er och jag använde HTML-bas-taggen för att få det att fungera.

Nu, när jag försöker göra en ajax-förfrågan får jag följande fel:

XMLHttpRequest kan inte ladda http://www.example.com/login.php. Ingen 'Access-Control-Allow-Origin'-rubrik finns på den begärda resursen. Ursprung 'http://example.com' får därför inte åtkomst.

Svar #1

Använd addHeader istället för att använda setHeader-metoden,

response.addHeader("Access-Control-Allow-Origin", "*");

* i raden ovan kommer att tillåta åtkomst till alla domäner.

För att tillåta åtkomst till endast specifik domän:

response.addHeader("Access-Control-Allow-Origin", "http://www.example.com");

Kolla in detta blogginlägg.

Svar #2

Varför felet uppstår:

JavaScript-kod är begränsad av samma ursprungsprincip, vilket betyder att från en sida på www.example.com kan du endast göra (AJAX-)förfrågningar till tjänster som finns på exakt samma domän, i det fallet, exakt www.example.com (inte example.com - utan www - eller whatever.example.com).

I ditt fall försöker din Ajax-kod nå en tjänst på http://wordicious.com från en sida som finns på http://www.wordicious.com.

Även om de är mycket lika, är de inte samma domän. Och när de inte är på samma domän, kommer förfrågan bara att lyckas om målets svar innehåller en Access-Control-Allow-Origin-header.

Eftersom din sida/tjänst på http://wordicious.com aldrig konfigurerades för att visa en sådan rubrik, visas det felmeddelandet.

Lösning:

Som sagt, ursprunget (där sidan med JavaScript finns) och måldomänen (dit JavaScript försöker nå) måste vara exakt samma.

Ditt fall verkar som ett skrivfel. Det ser ut som http://wordicious.com och http://www.wordicious.com faktiskt är samma server/domän. Så för att fixa detta, skriv målet och ursprunget lika: få din Ajax-kod att begära sidor/tjänster från http://www.wordicious.com inte http://wordicious.com. (Kanske placera mål-URL:en relativt, som '/login.php', utan domänen).

På ett mer allmänt plan:

Om problemet inte är ett stavfel som det verkar vara i denna fråga, skulle lösningen vara att lägga till Access-Control-Allow-Origin till mål-domänen. Hur man lägger till det beror förstås på servern/språket bakom den adressen. Ibland räcker det med en konfigurationsvariabel i verktyget. Ibland måste du själv lägga till headers via kod.

Svar #3

För .NET-server kan detta konfigureras i web.config som visas nedan

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="your_clientside_websiteurl" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>

Till exempel, låt oss säga, om serverns domän är http://live.makemypublication.com och klienten är http://www.makemypublication.com, konfigurera då i serverns web.config som nedan

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="http://www.makemypublication.com" />
     </customHeaders>
  </httpProtocol>
 </system.webServer>

Svar #4

Om du får detta felmeddelande från webbläsaren:

Ingen 'Access-Control-Allow-Origin'-header finns på den begärda resursen. Ursprung '…' tillåts därför inte åtkomst

när du försöker göra en Ajax POST/GET-förfrågan till en fjärrserver som du inte har kontroll över, vänligen glöm denna enkla lösning:

<?php header('Access-Control-Allow-Origin: *'); ?>

Vad du verkligen behöver göra, särskilt om du bara använder JavaScript för att göra Ajax-förfrågan, är en intern proxy som tar din fråga och skickar den vidare till den fjärrservern.

Först i din JavaScript, gör ett Ajax-anrop till din egen server, något som detta:

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async:false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

Skapa sedan en enkel PHP-fil som heter proxy.php för att kapsla in dina POST-data och bifoga dem till den fjärranslutna URL-servern som parametrar. Jag ger dig ett exempel på hur jag kringgår detta problem med Expedia Hotel-söknings-API:

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

Genom att göra:

 echo json_encode(file_get_contents($url));

Du gör bara samma fråga men på serversidan och efter det borde det fungera bra.

Svar #5

Du behöver lägga till detta i början av din PHP-sida "login.php"

<?php header('Access-Control-Allow-Origin: *'); ?>

Relaterade artiklar