ไม่มีส่วนหัว 'Access-Control-Allow-Origin' บนทรัพยากรที่ร้องขอ ต้นกำเนิด '…' จึงไม่ได้รับอนุญาตให้เข้าถึง

ฉันใช้. htaccess เพื่อเขียน URL ใหม่และฉันใช้แท็กฐาน html เพื่อให้ใช้งานได้

ตอนนี้เมื่อฉันพยายามส่งคำขอ ajax ฉันได้รับข้อผิดพลาดต่อไปนี้:

XMLHttpRequest ไม่สามารถโหลดhttp://www.example.com/login.phpได้ ไม่มีส่วนหัว 'Access-Control-Allow-Origin' บนทรัพยากรที่ร้องขอ Origin ' http://example.com' ไม่อนุญาตให้เข้าถึง

ใช้addHeaderแทนการใช้setHeaderวิธี

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

*access to all domainsในสายดังกล่าวข้างต้นจะช่วยให้

สำหรับการอนุญาตaccess to specific domain only:

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

blog postตรวจสอบเรื่องนี้

สาเหตุที่เกิดข้อผิดพลาด:

โค้ด JavaScript ถูก จำกัด ด้วยนโยบายเดียวกันแหล่งกำเนิดความหมายจากหน้าเว็บที่www.example.comคุณจะสามารถทำให้ (AJAX) การร้องขอไปยังบริการอยู่ที่ว่าโดเมนเดียวกันในกรณีที่ว่าwww.example.com( ไม่ได้ example.com - โดยไม่ต้องwww- หรือwhatever.example.com)

ในกรณีของคุณรหัสอาแจ็กซ์ของคุณพยายามที่จะเข้าถึงบริการในจากหน้าตั้งอยู่ที่http://wordicious.comhttp://www.wordicious.com

แม้ว่าจะคล้ายกันมากพวกเขาไม่ได้เป็นโดเมนเดียวกัน และเมื่อพวกเขาไม่ได้อยู่ในโดเมนเดียวกันคำขอจะประสบความสำเร็จก็ต่อเมื่อการที่เป้าหมายนั้นมีAccess-Control-Allow-Originส่วนหัวอยู่ในนั้น

เนื่องจากหน้า / บริการของคุณที่http://wordicious.comไม่เคยถูกกำหนดค่าให้แสดงส่วนหัวดังกล่าวข้อความแสดงข้อผิดพลาดจะปรากฏขึ้น

สารละลาย:

เช่นกล่าวว่าต้นกำเนิด (ที่หน้าด้วย JavaScript ที่) และเป้าหมาย (ที่จาวาสคริปต์จะพยายามไปให้ถึง) โดเมนจะต้องเป็นที่แน่นอนเดียวกัน

กรณีของคุณดูเหมือนว่าพิมพ์ผิด ดูเหมือนว่าhttp://wordicious.comและhttp://www.wordicious.comเป็นเซิร์ฟเวอร์ / โดเมนเดียวกัน ดังนั้นในการแก้ไขให้พิมพ์เป้าหมายและต้นกำเนิดอย่างเท่าเทียมกัน: ทำให้หน้า Ajax code ขอ / บริการของคุณhttp://www.wordicious.comไม่เป็นhttp://wordicious.comเช่นนั้น (อาจวาง URL เป้าหมายค่อนข้างเหมือน'/login.php'ไม่มีโดเมน)

ในบันทึกทั่วไปเพิ่มเติม:

หากปัญหาไม่ได้พิมพ์ผิดอย่างหนึ่งของคำถามนี้น่าจะเป็นวิธีการแก้ปัญหาจะเพิ่มAccess-Control-Allow-Originไปยังโดเมนเป้าหมาย ในการเพิ่มขึ้นอยู่กับเซิร์ฟเวอร์ / ภาษาหลังที่อยู่นั้น บางครั้งตัวแปรการกำหนดค่าในเครื่องมือจะทำเคล็ดลับ เวลาอื่นคุณจะต้องเพิ่มส่วนหัวผ่านรหัสด้วยตัวคุณเอง

สำหรับเซิร์ฟเวอร์. NET สามารถกำหนดค่านี้ใน web.config ดังที่แสดงด้านล่าง

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

ตัวอย่างเช่นสมมติว่าหากโดเมนเซิร์ฟเวอร์คือhttp://live.makemypublication.comและลูกค้าคือ http://www.makemypublication.com ให้กำหนดค่าใน web.config ของเซิร์ฟเวอร์ดังนี้

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

หากคุณได้รับข้อความแสดงข้อผิดพลาดจากเบราว์เซอร์:

ไม่มีส่วนหัว 'Access-Control-Allow-Origin' บนทรัพยากรที่ร้องขอ ต้นกำเนิด '…' จึงไม่ได้รับอนุญาตให้เข้าถึง

เมื่อคุณพยายามที่จะทำคำขอ Ajax POST / GET ไปยังเซิร์ฟเวอร์ระยะไกลซึ่งอยู่นอกเหนือการควบคุมของคุณโปรดลืมเกี่ยวกับการแก้ไขง่ายๆนี้:

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

สิ่งที่คุณต้องทำจริงๆโดยเฉพาะถ้าคุณใช้ JavaScript เพื่อทำคำขอ Ajax เท่านั้นคือพร็อกซีภายในที่รับการสอบถามและส่งผ่านไปยังเซิร์ฟเวอร์ระยะไกล

ก่อนอื่นใน JavaScript ของคุณทำการโทร Ajax ไปยังเซิร์ฟเวอร์ของคุณเองเช่น:

$.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);
    }
});

จากนั้นสร้างไฟล์ PHP อย่างง่ายชื่อ proxy.php เพื่อตัดข้อมูล POST ของคุณและผนวกเข้ากับเซิร์ฟเวอร์ URL ระยะไกลเป็นพารามิเตอร์ ฉันขอยกตัวอย่างว่าฉันจะเลี่ยงปัญหานี้ด้วย API การค้นหาของ Expedia ได้อย่างไร:

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));
 }

จากการทำ:

 echo json_encode(file_get_contents($url));

คุณเพิ่งจะทำแบบสอบถามเดียวกัน แต่ในฝั่งเซิร์ฟเวอร์และหลังจากนั้นควรทำงานได้ดี

คุณต้องเพิ่มสิ่งนี้ในตอนต้นของหน้า php "login.php"

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

คุณต้องวางคีย์ส่วนหัว / ค่าในการตอบสนองวิธีการตัวเลือก ตัวอย่างเช่นถ้าคุณมีทรัพยากรที่http://mydomain.com/myresource ในรหัสเซิร์ฟเวอร์ที่คุณเขียน

//response handler
void handleRequest(Request request, Response response) {
    if(request.method == "OPTIONS") {
       response.setHeader("Access-Control-Allow-Origin","http://clientDomain.com")
       response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
       response.setHeader("Access-Control-Allow-Headers", "Content-Type");
    }



}

แก้ไขการตอบสนองส่วนหัวของ API โดยการเพิ่มพารามิเตอร์เพิ่มเติมดังต่อไปนี้

การควบคุมการเข้าถึงอนุญาตหนังสือรับรอง: จริง

การเข้าถึงควบคุมการอนุญาตกำเนิด: *

แต่นี่ไม่ใช่ทางออกที่ดีเมื่อพูดถึงเรื่องความปลอดภัย

วิธีแก้ปัญหาคือใช้ reverse proxy ที่ทำงานบนโฮสต์ 'ต้นทาง' ของคุณและส่งต่อไปยังเซิร์ฟเวอร์เป้าหมายของคุณเช่น Fiddler:

เชื่อมโยงที่นี่: http://docs.telerik.com/fiddler/configure-fiddler/tasks/usefiddlerasreverseproxy

หรือพร็อกซี Apache Reverse ...

เพิ่มไปยังไฟล์ PHP หรือตัวควบคุมหลัก

header("Access-Control-Allow-Origin: http://localhost:9000");

แก้ไขด้วยรายการด้านล่างใน httpd.conf

#CORS Issue
Header set X-Content-Type-Options "nosniff"
Header always set Access-Control-Max-Age 1728000
Header always set Access-Control-Allow-Origin: "*"
Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT,PATCH"
Header always set Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,Content-Type,Origin,Authentication,Authorization,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control"
Header always set Access-Control-Allow-Credentials true

#CORS REWRITE
RewriteEngine On                  
RewriteCond %{REQUEST_METHOD} OPTIONS 
#RewriteRule ^(.*)$ $1 [R=200,L]
RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]]

มีความสุขค้นหาฟังก์ชั่นที่ใช้ใน XMLHTTPREQUEST ใน Javascript สำหรับการตั้งค่าส่วนหัวคำขอ

...

xmlHttp.setRequestHeader("Access-Control-Allow-Origin", "http://www.example.com");
...
</script>

การอ้างอิง: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader