ข้อผิดพลาด XmlHttpRequest: Origin null ไม่ได้รับอนุญาตจาก Access-Control-Allow-Origin

ฉันกำลังพัฒนาหน้าที่ดึงภาพจาก Flickr และ Panoramio ผ่านการสนับสนุน AJAX ของ jQuery

ด้าน Flickr ทำงานได้ดี แต่เมื่อฉันลอง$.get(url, callback)จาก Panoramio ฉันเห็นข้อผิดพลาดในคอนโซลของ Chrome:

XMLHttpRequest ไม่สามารถโหลดhttp://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150 Origin null ไม่ได้รับอนุญาตจาก Access-Control-Allow-Origin

หากฉันค้นหา URL นั้นจากเบราว์เซอร์โดยตรงจะทำงานได้ดี เกิดอะไรขึ้นและฉันจะแก้ไขสิ่งนี้ได้อย่างไร ฉันเขียนข้อความค้นหาไม่ถูกต้องหรือนี่คือสิ่งที่ Panoramio ทำเพื่อขัดขวางสิ่งที่ฉันพยายามทำ

Google ไม่ได้เปิดขึ้นตรงกับประโยชน์ใด ๆ เกี่ยวกับข้อผิดพลาด

แก้ไข

นี่คือตัวอย่างรหัสบางส่วนที่แสดงปัญหา:

$().ready(function () {
  var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150';

  $.get(url, function (jsonp) {
    var processImages = function (data) {
      alert('ok');
    };

    eval(jsonp);
  });
});

คุณสามารถรันตัวอย่างออนไลน์

แก้ไข 2

ขอบคุณดารินที่ช่วยเขาในเรื่องนี้ รหัสข้างต้นผิด ใช้สิ่งนี้แทน:

$().ready(function () {
  var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150&callback=?';

  $.get(url, function (data) {
    // can use 'data' in here...
  });
});

สำหรับบันทึกเท่าที่ฉันสามารถบอกได้คุณมีสองปัญหา:

1. คุณไม่ได้ส่งตัวระบุชนิด "jsonp" ไปยังของคุณ$.getดังนั้นจึงใช้ XMLHttpRequest สามัญ อย่างไรก็ตามเบราว์เซอร์ของคุณรองรับ CORS (การแบ่งปันทรัพยากรข้ามแหล่งกำเนิด) เพื่ออนุญาตให้ใช้ XMLHttpRequest ข้ามโดเมนได้หากเซิร์ฟเวอร์ตกลง นั่นคือสิ่งที่Access-Control-Allow-Originส่วนหัวเข้ามา

2. ฉันเชื่อว่าคุณพูดถึงว่าคุณกำลังเรียกใช้จากไฟล์: // URL มีสองวิธีสำหรับส่วนหัว CORS เพื่อส่งสัญญาณว่า XHR ข้ามโดเมนตกลง หนึ่งคือการส่งAccess-Control-Allow-Origin: *(ซึ่งถ้าคุณเข้าถึง Flickr ผ่าน$.getพวกเขาจะต้องทำ) ในขณะที่อื่น ๆ คือการสะท้อนกลับเนื้อหาของOriginส่วนหัว อย่างไรก็ตามfile://URL จะสร้างค่า Null Originซึ่งไม่สามารถให้สิทธิ์ผ่าน echo-back ได้

$.getJSONครั้งแรกที่ได้รับการแก้ไขได้ในทางอ้อมโดยข้อเสนอแนะของดารินทร์กับการใช้งาน มันวิเศษเล็กน้อยที่จะเปลี่ยนประเภทคำขอจากค่าเริ่มต้นของ "json" เป็น "jsonp" หากเห็นสตริงย่อยcallback=?ใน URL

นั่นแก้ไขข้อที่สองโดยไม่พยายามทำการร้องขอ CORS จากfile://URL อีกต่อไป

ในการชี้แจงให้คนอื่นทราบต่อไปนี้เป็นคำแนะนำในการแก้ไขปัญหาอย่างง่าย:

1. หากคุณกำลังพยายามใช้ JSONP ตรวจสอบให้แน่ใจว่าสิ่งใดสิ่งหนึ่งต่อไปนี้เป็นจริง:
   • คุณกำลังใช้$.getและการตั้งค่าไปdataTypejsonp
   • คุณกำลังใช้$.getJSONและรวมอยู่callback=?ใน URL
2. หากคุณกำลังพยายามทำ XMLHttpRequest ข้ามโดเมนผ่านทาง CORS ...
   1. http://ให้แน่ใจว่าคุณกำลังทดสอบผ่าน สคริปต์ที่ทำงานผ่านทางfile://มีการสนับสนุนที่ จำกัด สำหรับ CORS
   2. ตรวจสอบให้แน่ใจว่าเบราว์เซอร์รองรับ CORSจริง (Opera และ Internet Explorer ช้าไปจนถึงงานปาร์ตี้)

คุณอาจต้องเพิ่ม HEADER ในสคริปต์ที่เรียกว่านี่คือสิ่งที่ฉันต้องทำใน PHP:

header('Access-Control-Allow-Origin: *');

รายละเอียดเพิ่มเติมในบริการข้ามโดเมน AJAX ou บริการเว็บ (ภาษาฝรั่งเศส)

สำหรับโครงการ HTML อย่างง่าย:

cd project
python -m SimpleHTTPServer 8000

จากนั้นเรียกดูไฟล์ของคุณ

ใช้งานได้กับฉันใน Google Chrome v5.0.375.127 (ฉันได้รับการแจ้งเตือน):

$.get('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150',
function(json) {
    alert(json.photos[1].photoUrl);
});

นอกจากนี้ฉันขอแนะนำให้คุณใช้$.getJSON()วิธีการแทนเพราะก่อนหน้านี้ไม่ทำงานบน IE8 (อย่างน้อยในเครื่องของฉัน):

$.getJSON('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150', 
function(json) {
    alert(json.photos[1].photoUrl);
});

คุณอาจจะลองออนไลน์จากที่นี่

UPDATE:

ตอนนี้คุณได้แสดงรหัสของคุณแล้วฉันสามารถดูปัญหาได้ คุณมีทั้งฟังก์ชั่นที่ไม่ระบุชื่อและฟังก์ชั่นแบบอินไลน์ processImagesแต่ทั้งสองจะถูกเรียกว่า นั่นคือการสนับสนุน JSONP ของ jQuery สังเกตว่าฉันกำหนดไว้อย่างไรcallback=?เพื่อที่คุณจะได้ใช้ฟังก์ชั่นนิรนาม คุณอาจจะอ่านรายละเอียดเพิ่มเติมเกี่ยวกับเรื่องนี้ในเอกสารประกอบ

ข้อสังเกตอีกอย่างคือคุณไม่ควรเรียก eval พารามิเตอร์ที่ส่งผ่านไปยังฟังก์ชันที่ไม่ระบุชื่อของคุณจะถูกวิเคราะห์คำใน JSON โดย jQuery

ตราบใดที่เซิร์ฟเวอร์ที่ร้องขอรองรับรูปแบบข้อมูล JSON ให้ใช้อินเตอร์เฟส JSONP (JSON Padding) ช่วยให้คุณสามารถร้องขอโดเมนภายนอกโดยไม่ต้องใช้พร็อกซีเซิร์ฟเวอร์หรือเนื้อหาส่วนหัวแฟนซี

เป็นนโยบายกำเนิดเดียวกันคุณต้องใช้ส่วนต่อประสาน JSON-P หรือพร็อกซีที่ทำงานบนโฮสต์เดียวกัน

เราจัดการผ่านhttp.confไฟล์ (แก้ไขแล้วเริ่มบริการ HTTP ใหม่):

<Directory "/home/the directory_where_your_serverside_pages_is">
    Header set Access-Control-Allow-Origin "*"
    AllowOverride all
    Order allow,deny
    Allow from all
</Directory>

ในHeader set Access-Control-Allow-Origin "*", คุณสามารถใส่ URL ที่แม่นยำ

หากคุณทำการทดสอบในพื้นที่หรือโทรหาไฟล์จากที่อื่นfile://คุณต้องปิดการใช้งานความปลอดภัยของเบราว์เซอร์

บน MAC: open -a Google\ Chrome --args --disable-web-security

ในกรณีของฉันรหัสเดียวกันทำงานได้ดีบน Firefox แต่ไม่ใช่ใน Google Chrome คอนโซล JavaScript ของ Google Chrome กล่าวว่า:

XMLHttpRequest cannot load http://www.xyz.com/getZipInfo.php?zip=11234. 
Origin http://xyz.com is not allowed by Access-Control-Allow-Origin.
Refused to get unsafe header "X-JSON"

ฉันต้องดร็อปส่วน www ของ Ajax URL เพื่อให้ตรงกับ URL ต้นทางอย่างถูกต้องและทำงานได้ดี

ไม่ใช่เซิร์ฟเวอร์ทั้งหมดที่สนับสนุน jsonp มันต้องการให้เซิร์ฟเวอร์ตั้งค่าฟังก์ชันการเรียกกลับในผลลัพธ์ ฉันใช้สิ่งนี้เพื่อรับการตอบกลับของ json จากไซต์ที่คืนค่า json บริสุทธิ์ แต่ไม่สนับสนุน jsonp:

function AjaxFeed(){

    return $.ajax({
        url:            'http://somesite.com/somejsonfile.php',
        data:           {something: true},
        dataType:       'jsonp',

        /* Very important */
        contentType:    'application/json',
    });
}

function GetData() {
    AjaxFeed()

    /* Everything worked okay. Hooray */
    .done(function(data){
        return data;
    })

    /* Okay jQuery is stupid manually fix things */
    .fail(function(jqXHR) {

        /* Build HTML and update */
        var data = jQuery.parseJSON(jqXHR.responseText);

        return data;
    });
}

ฉันใช้เซิร์ฟเวอร์ Apache ดังนั้นฉันจึงใช้โมดูล mod_proxy เปิดใช้งานโมดูล:

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

จากนั้นเพิ่ม:

ProxyPass /your-proxy-url/ http://service-url:serviceport/

สุดท้ายส่ง proxy-url ไปที่สคริปต์ของคุณ

ในฐานะที่เป็นโน้ตสุดท้ายเอกสาร Mozilla บอกอย่างชัดเจนว่า

ตัวอย่างด้านบนจะล้มเหลวหากส่วนหัวเป็น wildcarded เป็น: Access-Control-Allow-Origin: * เนื่องจาก Access-Control-Allow-Origin ระบุอย่างชัดเจนถึงhttp: //foo.example เนื้อหาของหนังสือรับรองจะถูกส่งกลับไปยังเนื้อหาเว็บที่เรียกใช้

ดังนั้นการใช้ '*' จึงไม่ใช่วิธีปฏิบัติที่ไม่ดี เพียงแค่ไม่ทำงาน :)

สำหรับ PHP - ใช้งานได้กับ Chrome, Safari และ firefox

https://w3c.github.io/webappsec-cors-for-developers/#avoid-returning-access-control-allow-origin-null

header('Access-Control-Allow-Origin: null');

การใช้ axios โทรบริการ php สดกับไฟล์: //

ฉันได้รับข้อผิดพลาดเดียวกันใน Chrome (ฉันไม่ได้ทดสอบเบราว์เซอร์อื่น) มันเป็นเพราะความจริงที่ว่าฉันกำลังนำทางบน domain.com แทนที่จะเป็น www.domain.com ค่อนข้างแปลก แต่ฉันสามารถแก้ปัญหาได้โดยเพิ่มบรรทัดต่อไปนี้ใน. htaccess มันเปลี่ยนเส้นทาง domain.com ไปที่ www.domain.com และปัญหาได้รับการแก้ไขแล้ว ฉันเป็นผู้เยี่ยมชมเว็บไซต์ขี้เกียจดังนั้นฉันแทบไม่เคยพิมพ์ www แต่เห็นได้ชัดว่าในบางกรณีจำเป็นต้องมี

RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain\.com$ [NC]
RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L]

ตรวจสอบให้แน่ใจว่าคุณใช้ JQuery เวอร์ชันล่าสุด เราพบข้อผิดพลาดนี้สำหรับ JQuery 1.10.2 และข้อผิดพลาดได้รับการแก้ไขหลังจากใช้ JQuery 1.11.1

folks,

ฉันพบปัญหาที่คล้ายกัน แต่ด้วยการใช้ Fiddler ฉันสามารถแก้ไขปัญหานี้ได้ ปัญหาคือว่าไคลเอนต์ URL ที่มีการกำหนดค่าในการใช้งาน CORS บนฝั่ง Web API ต้องไม่มีเครื่องหมายทับหน้าต่อท้าย หลังจากส่งคำขอของคุณผ่าน Google Chrome และตรวจสอบแท็บTextViewของส่วน Headersของ Fiddler แล้วข้อความแสดงข้อผิดพลาดจะแจ้งดังนี้:

* "นโยบายที่ระบุกำเนิด your_client_url: / 'ไม่ถูกต้องไม่สามารถจบด้วยเครื่องหมายทับหน้า"

นี่เป็นเรื่องแปลกจริงเพราะมันทำงานได้โดยไม่มีปัญหาใด ๆ ใน Internet Explorer แต่ทำให้ฉันปวดหัวเมื่อทดสอบโดยใช้ Google Chrome

ฉันลบเครื่องหมายทับหน้าในโค้ด CORS และคอมไพล์เว็บ API ใหม่และตอนนี้ API สามารถเข้าถึงได้ผ่าน Chrome และ Internet Explorer โดยไม่มีปัญหาใด ๆ กรุณาให้ภาพนี้

ขอบคุณแอนดี้

มีปัญหาเล็กน้อยในการแก้ปัญหาที่โพสต์โดย CodeGroover ด้านบนซึ่งหากคุณเปลี่ยนไฟล์คุณจะต้องรีสตาร์ทเซิร์ฟเวอร์เพื่อใช้ไฟล์ที่อัปเดตจริง ๆ (อย่างน้อยในกรณีของฉัน)

ดังนั้นค้นหาเล็กน้อยฉันพบสิ่งนี้ใช้:

sudo npm -g install simple-http-server # to install
nserver # to use

http://localhost:8000และจากนั้นก็จะทำหน้าที่ที่