javascript - لماذا أشاهد هنا خطأ "غير مسموح به بواسطة Access-Control-Allow-Origin"؟




ajax xmlhttprequest youtube-api (10)

إذا كنت من خلفية java ، فقد يكون أحد الحلول الممكنة هو إنشاء servlet الذي يستدعي خدمات الويب لجافا سكريبت الخاص بك. شيء مثل الكود أدناه في طريقة GET (اختيارك) ...

JsonElement jelement;
    JsonArray jarray;
    try {
        URL url = new URL("http://rest."YOUR URL"#ba0482");
        URLConnection connection = url.openConnection();
        connection.setDoInput(true);
        InputStream inStream = connection.getInputStream();
        BufferedReader input = new BufferedReader(new InputStreamReader(inStream));

        jelement = new JsonParser().parse(input);

        jarray = jelement.getAsJsonArray();

        response.setContentType("application/json");
        PrintWriter out = response.getWriter();
        out.print(jarray);
        out.flush();
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

الآن في javascript ببساطة حدد عنوان URL باسم servlet !!

هذا السؤال لديه بالفعل إجابة هنا:

أرى الخطأ التالي:

Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin

بهذا الرمز:

var http = new getXMLHttpRequestObject();
var url = "http://gdata.youtube.com/action/GetUploadToken";
var sendXML = '<?xml version="1.0"?><entry xmlns="http://www.w3.org/2005/Atom"'+
    'xmlns:media="http://search.yahoo.com/mrss/'+
    'xmlns:yt="http://gdata.youtube.com/schemas/2007">'+
    '<media:group><media:title type="plain">My First API</media:title>'+
    '<media:description type="plain">First API</media:description>'+
    '<media:category scheme="http://gdata.youtube.com/schemas/2007/categories.cat">People</media:category>'+
    '<media:keywords>first, api</media:keywords></media:group></entry>';
http.open("POST", url, true);
http.setRequestHeader("Authorization", "AuthSub token=" + AccessToken);
http.setRequestHeader("X-GData-Key", "key="+ dev_key);
http.setRequestHeader("Content-Type", "application/atom+xml; charset=UTF-8");

http.onreadystatechange = function() {
    if(http.readyState == 4) {
        alert(http.responseXML);
    }
}
http.send(sendXML);

ما الذي يمكن أن يسبب هذا ، وكيف يمكنني حلها؟


أركض في نفس رسالة الخطأ ، عند استخدام ajax للوصول إلى صفحة php (ملف javascript و php موجودان على نفس الخادم).

السبب هو أنني قمت بتحديد عنوان IP كمجال في جافا سكريبت الخاص بي. هذا ما جعل المتصفح يعتقد أن الاتصال بملف php موجود على خادم آخر.

لذلك حل سهل للتخلص من رسالة الخطأ هذه. أ) تحقق من وجود ملف javascript و php على نفس الخادم b) تأكد من أن عنوان url (على وجه الخصوص المجال) في JavaScript (مثل http://www.smartana.co.uk/myJavaScript.js ) ajax يعكس عنوان url الخاص بخادمك (على سبيل المثال ، http://www.smartana.co.uk/myServer.php ).


لا علاقة لهذا السؤال تحديدًا ، ولكن لأي شخص في هذه الحالة باستخدام jQuery ... يحدث هذا الخطأ أيضًا إذا حاولت تقديم طلب JSONP باستخدام jQuery وإهمال معلمة رد الاتصال السحري: callback=?


هنا ، نحتاج إلى القيام بشيئين لـ Apache Http

1) في ملف httpd.config ، قم بتفكيك هذا الملف

LoadModule headers_module modules/mod_headers.so

2) أضف هذا الخط في الأسفل.

Header set Access-Control-Allow-Origin "*"

بالنسبة إلى التطوير المحلي ، يمكنك استخدام أداة لتعديل رؤوس استجابة HTTP. على سبيل المثال تشارلز قادر على القيام بذلك عن طريق أداة إعادة الكتابة المضمنة: أداة إعادة الكتابة

ما عليك سوى إضافة قاعدة جديدة للنطاق / الموقع المستهدف مع:

Type: Add Header
Where: Response
Replace
     Name: Access-Control-Allow-Origin
     Value: *
Replace All

تكون Javascript محدودة عند تقديم طلبات ajax خارج النطاق الحالي.

  • المثال 1: نطاقك هو example.com وتريد تقديم طلب إلى test.com => لا يمكنك ذلك.
  • المثال 2: نطاقك هو example.com وتريد تقديم طلب إلى inner.example.com => لا يمكنك ذلك.
  • المثال 3: نطاقك هو example.com:80 وتريد تقديم طلب إلى example.com:81 => لا يمكنك ذلك
  • EX 4: نطاقك هو example.com وتريد تقديم طلب إلى example.com => يمكنك ذلك.

تقتصر Javascript على "نفس سياسة الأصل" لأسباب تتعلق بالأمان حتى لا يتمكن البرنامج النصي الخبيث من الاتصال بخادم بعيد وإرسال بيانات حساسة.

jsonp هي طريقة مختلفة لاستخدام javascript. يمكنك تقديم طلب ويتم تغليف النتائج في وظيفة رد اتصال يتم تشغيلها في العميل. إنها نفس طريقة ربط علامة نصية جديدة في الجزء الرئيسي من html (أنت تعرف أنه يمكنك تحميل نصوص برمجية من نطاقات مختلفة غير نطاقك هنا).
ومع ذلك ، لاستخدام jsonp يجب تكوين الخادم بشكل صحيح. إذا لم تكن هذه هي الحالة ، فلا يمكنك استخدام jsonp ويجب أن تعتمد على الخادم الوكيل للخادم (PHP ، ASP ، إلخ). هناك الكثير من الأدلة المتعلقة بهذا الموضوع ، مجرد جوجل ذلك!


أضف global.asax في الحل الخاص بك.

إضافة

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

في

protected void Application_BeginRequest(object sender, EventArgs e)
{
}

لن يتيح لك XMLHttpRequest الوصول إلى localhost:8080 بسبب "نفس سياسة الأصل".

يمكنك السماح بطلبات من المتصفحات الحديثة عن طريق إضافة عنوان إلى ردك على localhost:8080 : localhost:8080 :

Access-Control-Allow-Origin: *

يمكنك القيام بذلك عن طريق إضافة أوامر إلى خادم HTTP الخاص بك أو إضافة رؤوس من خلال رمز من جانب الخادم (PHP ، Ruby ، ​​...).

اقرأ المزيد حول طلبات ajax عبر أصل على https://developer.mozilla.org/en/http_access_control


إذا كنت تستخدم apache ، فهذا يعمل: ضع هذا في / أنشئ ملف .htaccess في جذرك العام ، وأضف أي إضافات أخرى قد تحتاجها.

<FilesMatch "\.(ttf|otf|eot|woff|jpg|png|jpeg|gif|js|json|html|css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

إذا تلقيت رسالة الخطأ هذه من المتصفح:

لا يوجد رأس "Access-Control-Allow-Origin" في المورد المطلوب. المنشأ '...' لذلك لا يسمح بالوصول

عندما تحاول تنفيذ طلب Ajax POST / GET إلى خادم بعيد خارج سيطرتك ، يُرجى نسيان هذا الإصلاح البسيط:

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

ما عليك فعله فعلاً ، خاصة إذا كنت تستخدم جافا سكريبت فقط للقيام بطلب 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 البعيد كمعلمات. أعطيكم مثالاً على كيف أتجاوز هذه المشكلة مع واجهة برمجة تطبيقات بحث Expedia Hotel:

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

أنت تقوم فقط بنفس الاستعلام ولكن على جانب الخادم وبعد ذلك ، يجب أن تعمل بشكل جيد.





javascript ajax xmlhttprequest youtube-api