jquery - لماذا يحصل جافا سكريبت الخاص بي على رأس "لا يمكن الوصول إلى-التحكم-السماح-الأصل" على المورد المطلوب "خطأ عندما لا يقوم Postman؟




cors restful-authentication (20)

أحاول إجراء تفويض باستخدام JavaScript عن طريق الاتصال بـ RESTful API المبني في Flask . ومع ذلك ، عند تقديم الطلب ، أتلقى الخطأ التالي:

لا يمكن تحميل XMLHttpRequest http: // myApiUrl / login . لا يوجد رأس "Access-Control-Allow-Origin" في المورد المطلوب. وبالتالي ، لا يُسمح باستخدام الأصل "فارغ".

أعلم أنه يجب على واجهة برمجة التطبيقات أو المورد البعيد تعيين الرأس ، ولكن لماذا كان يعمل عند تقديم الطلب عبر امتداد Chrome Postman ؟

هذا هو رمز الطلب:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });

هذا ليس إصلاحًا للإنتاج أو عندما يجب عرض التطبيق على العميل ، وهذا مفيد فقط عندما يكون تطوير واجهة المستخدم والخلفية في خوادم مختلفة وفي الإنتاج تكون في الواقع على نفس الخادم. على سبيل المثال: أثناء تطوير واجهة المستخدم لأي تطبيق إذا كانت هناك حاجة لاختباره محليا مشيرا إلى خادم الخلفية ، في هذا السيناريو هذا هو الإصلاح المثالي. للحصول على إصلاح للإنتاج ، يجب إضافة رؤوس CORS إلى خادم الخلفية للسماح بالوصول عبر الأصل.

والطريقة السهلة هي إضافة الامتداد في google chrome للسماح بالدخول باستخدام CORS.

( https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US )

ما عليك سوى تمكين هذا الإضافة عندما تريد السماح بالوصول إلى طلب رأس "الوصول - التحكم - السماح - الأصل" .

أو

في Windows ، قم بلصق هذا الأمر في إطار التشغيل

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

سيؤدي هذا إلى فتح متصفح Chrome جديد لا يسمح بالوصول إلى طلب رأس "الوصول - التحكم - السماح - الأصل" .


أتمنى أن يشارك شخص ما هذا الموقع معي منذ فترة طويلة http://cors.io/ كان من شأنه أن يوفر الكثير من الوقت مقارنة بالبناء والاعتماد على الوكيل الخاص بي. ومع ذلك ، عندما تنتقل إلى مرحلة الإنتاج ، فإن وجود الوكيل الخاص بك هو أفضل رهان حيث أنك لا تزال تتحكم في جميع جوانب بياناتك.

كل ما تحتاجه:

https://cors.io/?http://HTTP_YOUR_LINK_HERE


إذا فهمت ذلك بشكل صحيح ، فأنت تقوم بإجراء XMLHttpRequest إلى نطاق مختلف عن تشغيل صفحتك. لذلك يقوم المتصفح بحجبه لأنه عادة ما يسمح بطلب في نفس المصدر لأسباب أمنية. يجب أن تفعل شيئًا مختلفًا عندما تريد إجراء طلب عبر النطاق. برنامج تعليمي حول كيفية تحقيق ذلك هو استخدام CORS .

عندما تستخدم ساعي البريد ، لا تكون مقيدة بهذه السياسة. مقتبس من Cross-Origin XMLHttpRequest :

يمكن لصفحات الويب العادية استخدام كائن XMLHttpRequest لإرسال البيانات وتلقيها من الخوادم البعيدة ، ولكنها محدودة وفقًا لسياسة الأصل نفسها. الإضافات ليست محدودة. يمكن للتوسعة التحدث إلى خوادم بعيدة خارج أصلها ، طالما أنها تطلب أذونات عبر مشتركة أولاً.


إذا كنت تستخدم Entity Framework ، فيبدو أنه سيتم طرح هذا الخطأ في بعض الأحيان حتى إذا تم تمكين CORS . لقد اكتشفت أن الخطأ حدث بسبب عدم اكتمال الاستعلام. أنا على أمل أن هذا سوف يساعد الآخرين في نفس الوضع.

يمكن التعليمة البرمجية التالية رمي XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. خطأ:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    });
}

لإصلاحها ، يلزم إجراء مكالمة على اللمسات الأخيرة مثل .ToList() أو .FirstOrDefault() في نهاية طلب البحث ، مثل:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    }).ToList();
}

إذا كنت لا تريد أن:

  1. تعطيل أمان الويب في Chrome
  2. استخدم JSONP
  3. استخدم موقعًا تابعًا لجهة خارجية لإعادة توجيه طلباتك

وأنت على يقين من أن خادمك قد تم تمكين CORS بعد ذلك (اختبار CORS هنا: http://www.test-cors.org/ )

ثم تحتاج إلى تمرير في معلمة الأصل مع طلبك. يجب أن يتطابق هذا المنشأ مع المصدر الذي يرسله متصفحك مع طلبك.

يمكنك الاطلاع عليها بشكل عملي هنا: http://www.wikibackpacker.com/app/detail/Campgrounds/3591

ترسل وظيفة التعديل طلب GET & POST إلى نطاق مختلف لجلب البيانات. أقوم بتعيين معلمة الأصل التي تعمل على حل المشكلة. الخلفية هي محرك ميدياويكي.

tldr: إضافة معلمة "origin" إلى مكالماتك التي يجب أن تكون معلمة Origin التي يرسلها المستعرض (لا يمكنك محاكاة محتوى الأصل)


استنادًا إلى إجابة شروتي ، قمت بإنشاء اختصار لمتصفح Chrome مع الوسائط المطلوبة:


جرب XDomain ،

موجز: نقية جافا سكريبت CORS بديل / polyfill. لا يلزم تهيئة الخادم - ما عليك سوى إضافة proxy.html على النطاق الذي ترغب في التواصل معه. تستخدم هذه المكتبة XHook لربط كل XMLHttpRequest ، لذلك يجب أن يعمل XDomain بالاشتراك مع أي مكتبة.


سؤال شائع - شيء آخر يجب النظر إليه إذا كنت قد قرأت هذا الآن ولم يساعدك شيء آخر. إذا كان لديك CDN مثل Akamai أو Limelight أو ما شابه ، قد ترغب في التحقق من مفتاح ذاكرة التخزين المؤقت لديك لـ URI للمصدر. إذا لم تتضمن قيمة رأس الصفحة الأصلية ، فربما تعرض ردًا تم تخزينه مؤقتًا عند طلبه من مصدر آخر. لقد أمضينا نصف يوم فقط في تصحيح هذه المشكلة. تم تحديث تهيئة CDN لتتضمن فقط قيمة الأصل لعدد قليل من النطاقات المحددة التي نختارها ونضبطها إلى null لكافة اللغات الأخرى. يبدو أن هذا يعمل ويسمح للمتصفحات من نطاقاتنا المعروفة بمشاهدة مواردنا. من المؤكد أن جميع الإجابات الأخرى هي متطلبات أساسية للوصول إلى هنا ، ولكن إذا كان الـ CDN هو أول قفزة من متصفحك ، فهذا شيء يجب مراجعته.

في حالتنا يمكننا أن نرى بعض الطلبات مما يجعلها في خدمتنا ولكن ليس ما يقرب من الحجم الذي كان يرسله الموقع. هذا يشير بنا إلى CDN. تمكنا من الرجوع ومشاهدة الطلب الأصلي تم تقديمه من طلب مباشر ، وليس جزءًا من استدعاء AJAX للمتصفح ورأس الرد لم يتم تضمين Access-Control-Allow-Origin. يبدو أن CDN مؤقتًا هذه القيمة. يبدو أن ضبط تهيئة Akamai CDN للنظر في قيمة رأس طلب الرأس كجزء من المطابقة قد جعله يعمل لصالحنا.


في كثير من الأحيان يحدث لي هذا من javascript إلى php api الخاص بي ، وذلك لسبب من الأسباب. نسيت وضع <?php header('Access-Control-Allow-Origin: *'); ? <?php header('Access-Control-Allow-Origin: *'); ? هو واحد. هذا مفيد للوصول عبر المجال الفرعي. سبب آخر ، هو أنه في طلب ajax jQuery أقوم بتحديد نوع بيانات محدد وإرجاع dataType مختلف ، لذا فإنه يرمي خطأ.

السبب الأخير والأبرز لهذا الخطأ هو وجود خطأ في التحليل على الصفحة التي تطلبها. إذا قمت بالضغط على عنوان url الخاص بهذه الصفحة في متصفحك أكثر من احتمال رؤية خطأ في التحليل وسيكون لديك رقم سطر لمعالجة المشكلة.

آمل أن يساعد هذا شخصًا ما. استغرق مني ذلك بعض الوقت لتصحيح هذا الأمر وأتمنى أن يكون لدي قائمة تحقق من الأشياء للتحقق منها.


لان
$ .ajax ({type: "POST" - Calls OPTIONS
$ .post ( - المكالمات POST

كلاهما عبارة عن مكالمات Postman مختلفة "POST" بشكل صحيح ولكن عندما نسميها ستكون "OPTIONS"

لخدمات c # على الويب - webapi

الرجاء إضافة التعليمة البرمجية التالية في ملف web.config ضمن العلامة <system.webServer>. هذا سيفي بالغرض

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

يرجى التأكد من أنك لا تفعل أي خطأ في مكالمة أجاكس

مسج

$.ajax({
    url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);    
    },
    error: function () {
        console.log("error");
    }
});

الرجاء تحديد 4 الزاوي: http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

ملاحظة: إذا كنت تبحث عن تنزيل محتوى من موقع ويب تابع لجهة خارجية ، فهذا لن يساعدك . يمكنك تجربة التعليمة البرمجية التالية ولكن ليس JavaScript.

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");

من السهل حلها إذا كنت تستخدم PHP . ما عليك سوى إضافة النص التالي في بداية صفحة PHP التي تتعامل مع الطلب:

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

تحذير: يحتوي هذا على مشكلة أمنية لملف PHP الخاص بك يمكن استدعاء من قبل المهاجمين. عليك استخدام الجلسات وملفات تعريف الارتباط للمصادقة لمنع ملفك / خدمتك من هذا الهجوم. خدمتك عرضة للتزوير عبر الموقع (CSRF).

إذا كنت تستخدم Node-red ، فيجب السماح لـ CROS في ملف node-red/settings.js بإلغاء التعليق على الأسطر التالية:

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},

هناك مشكلة عبر المجال باستخدام Ajax. يجب التأكد من أنك تدخل إلى ملفاتك على نفس http:// path بدون www. (أو الوصول من http://www. على نفس المسار بما في ذلك www. ) الذي يعتبره المتصفح مجالًا آخر عند الوصول عبر www. المسار ، لذلك ترى أين تكمن المشكلة. أنت تنشر إلى نطاق مختلف ويقوم المتصفح بحظر التدفق بسبب مشكلة الأصل.

إذا لم يتم وضع API على نفس المضيف الذي تطلب منه ، فسيتم حظر التدفق ، وستحتاج إلى البحث عن طريقة أخرى للتواصل مع واجهة برمجة التطبيقات.


يمكنك تجاوز المشكلة عن طريق استخدام YQL إلى الوكيل الطلب عبر خوادم Yahoo. إنه مجرد بضعة أسطر من الكود:

var yql_url = 'https://query.yahooapis.com/v1/public/yql';
var url = 'your api url';

$.ajax({
    'url': yql_url,
    'data': {
        'q': 'SELECT * FROM json WHERE url="'+url+'"',
        'format': 'json',
        'jsonCompat': 'new',
    },
    'dataType': 'jsonp',
    'success': function(response) {
        console.log(response);
    },
});

إليك الرابط مع شرح: https://vverma.net/fetch-any-json-using-jsonp-and-yql.html


يوفر https://github.com/Rob--W/cors-anywhere/ رمزًا (Node.js) يمكنك استخدامه لإعداد وكيل وكيل CORS الخاص بك وتشغيله. يتم الاحتفاظ به بشكل نشط ويوفر عددًا من الميزات للتحكم في سلوك الوكيل بخلاف الإرسال الأساسي لرؤوس الاستجابة الصحيحة Access-Control-* .

يحتوي developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS على تفاصيل لشرح كيفية معالجة المستعرضات للطلبات عبر أصل التي تجعل تطبيقات الويب من جانب العميل من جافا سكريبت وما هي الرؤوس التي يجب عليك تكوين إرسالها بواسطة الخادم الذي تم تقديم الطلب إليه ، إذا أمكنك ذلك.

في حالة ما إذا كان الموقع الذي تحتاج إليه لتقديم طلب والحصول على رد منه لا يعرض عنوان استجابة Access-Control-Allow-Origin ، فستعمل المتصفحات دائمًا على حظر طلبات عبر أصل تم إجراؤها مباشرةً من قبل العميل كود جافا سكريبت من العمل. وبالتالي إذا كان الموقع ليس عنصرًا يمكنك التحكم فيه ويمكنك تكوين سلوك له ، فإن الشيء الوحيد الذي سيعمل في هذه الحالة هو توكيد الطلبات - إما من خلال الوكيل الخاص بك الذي تديره بنفسك أو من خلال وكيل مفتوح.

كما ذكرنا في التعليقات الأخرى هنا ، هناك أسباب وجيهة لعدم الثقة في وكيل مفتوح مع طلباتك. ومع ذلك ، إذا كنت تعرف ما تفعله وتقرر أن الوكيل المفتوح يعمل وفقًا لاحتياجاتك ، https://cors-anywhere.herokuapp.com/ هو موقع متاح بشكل موثوق به وبصورة نشطة ، https://github.com/Rob--W/cors-anywhere/ code.

كما هو الحال مع وكلاء البروكسيات المفتوحة الأخرى المذكورة هنا (على الأقل يبدو أنهما غير متاحين بعد الآن) ، فإن الطريقة التي تعمل بها هي أنه بدلاً من أن يرسل رمز العميل الخاص بك طلبًا مباشرةً إلى ، على سبيل المثال ، http://foo.com إرسالها إلى https://cors-anywhere.herokuapp.com/http://foo.com ويضيف الوكيل رؤوس Access-Control-* الضرورية إلى الاستجابة التي يراها المتصفح.


No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' https://sx.xyz.com ' is therefore not allowed access.

I had also faced a similar problem with Cross Domain Data Exchange in the Ajax response as error undefined . But the response in header was Status Code:200 OK

Failed to load https://www.Domain.in/index.php?route=api/synchronization/checkapikey:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://sx.xyz.in' is therefore not allowed access.

The solution to get around it: In my case it was to call the function checkapikey() via Ajax to another domain and get the response with data to where the call has been made:

if (($this->request->server['REQUEST_METHOD'] == 'POST') && isset($this->request->server['HTTP_ORIGIN'])) {

        $this->response->addHeader('Access-Control-Allow-Origin: ' . $this->request->server['HTTP_ORIGIN']);
        $this->response->addHeader('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        $this->response->addHeader('Access-Control-Max-Age: 1000');
        $this->response->addHeader('Access-Control-Allow-Credentials: true');
        $this->response->addHeader('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

        $headers = getallheaders();
...
}

CORS is for you.

CORS is "Cross Origin Resource Sharing" and is a way to send a cross-domain request. Now the XMLHttpRequest2 and Fetch API both support CORS.

But it has its limits. Server need to specific claim the Access-Control-Allow-Origin , and it can not be set to '*'.

And if you want any origin can send request to you, you need JSONP (also need to set Access-Control-Allow-Origin , but can be '*').

For lots of request way if you don't know what to choose, I think you need a fully functional component to do that. Let me introduce a simple component catta

If you are using a modern browser (> Internet Explorer9, Chrome, Firefox, Edge, etc.), it is very recommended you use a simple, but beautiful component, catta . It has no dependencies, is less than 3 KB, and it supports Fetch, Ajax and JSONP with same dead-simple syntax and options.

catta('./data/simple.json').then(function (res) {
  console.log(res);
});

It also supports all the way to import to your project, like ES6 module, CommonJS and even <script> in HTML.


For Ruby on Rails server in application_controller.rb , add this:

after_action :cors_set_access_control_headers

def cors_set_access_control_headers
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Allow-Headers'] = '*'
end

I got this error with $http.get in Angular. I needed to use $http.jsonp instead.


Just to mention another way of "bypassing" it - AJAX proxy. Send request to your server to fetch the data from another origin and send the request back to you.

I prefer this approach over JSONP because it has some potential security issues.


Most of these answers tell users how to add CORS headers to a server they control.

However, if you need data from a server you don't control in a webpage, one solution is to create a script tag on your page, set the src attribute to the api endpoint that doesn't have CORS headers, then load that data onto the page:

window.handleData = function(data) {
  console.log(data)
};

var script = document.createElement('script');
script.setAttribute('src','https://some.api/without/cors/headers.com&callback=handleData');
document.body.appendChild(script);




flask-restless