it-swarm.asia

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

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

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

أعرف أن واجهة برمجة التطبيقات (API) أو المورد البعيد يجب أن يعين الرأس ، ولكن لماذا نجحت عندما قدمت الطلب عبر ملحق 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);
    });
2143
Mr Jedi

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

عندما تستخدم ساعي البريد ، فهي غير مقيدة بهذه السياسة. مقتبسة منXMLHttpRequest عبر الأصل:

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

1164
MD. Sahib Bin Mahboob

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

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

( https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi؟hl=ar )

ما عليك سوى تمكين هذا الامتداد متى أردت السماح بالوصول إلى no 'access-control-allow-Origin' طلب رأس.

أو

في Windows ، الصق هذا الأمر في تشغيل نافذة

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

سيؤدي هذا إلى فتح مستعرض جديد chrome يسمح بالوصول إلى no 'access-control-allow-Origin' طلب رأس.

495
shruti

إذا كان يمكنك التعامل مع JSON في المقابل ، فحاول استخدام JSONP (لاحظPفي النهاية) للتحدث بين المجالات:

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

تعرف على المزيد حول العمل مع JSONP هنا :

لقد فتح ظهور JSONP - الذي يعد أساسًا اختراقًا متفقًا على برمجة نصية عبر المواقع - الباب أمام عمليات خلط قوية للمحتوى. توفر العديد من المواقع البارزة خدمات JSONP ، مما يتيح لك الوصول إلى محتواها عبر واجهة برمجة تطبيقات محددة مسبقًا.

325
Gavin

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

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

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

إذا كنت تستخدم Node-red يجب عليك السماح لـ CORS في ملف 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"
},
203
shady sherif

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

كل ما تحتاجه:

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

171
yoshyosh

إذا كنت تستخدم Node.js ، فجربه:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

مزيد من المعلومات:CORS على ExpressJS

68
Nguyen Tran

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

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

64
Alin Razvan

لان
$ .ajax ({type: "POST" - CallsOPTIONS
$ .post (- CallsPOST

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

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

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

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

يرجى التأكد من عدم ارتكاب أي خطأ في اتصال ajax

مسج

$.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/

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

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

جرب XDomain ،

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

22
user3359786

ان لم تكن تريد ان:

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

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

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

يمكنك أن ترى ذلك في العمل هنا: http://www.wikinomad.com/app/detail/Campgrounds/3591

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

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

11
Ganesh Krishnan

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

9
Mohammad AlBanna

واجهت مشكلة مع هذا عندما استخدمت AngularJS للوصول إلى API الخاصة بي. نفس الطلب يعمل في SoapUI 5.0 و ColdFusion. تحتوي طريقة GET الخاصة بي بالفعل على رأس Access-Control-Allow-Origin.

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

<cffunction name="optionsMethod" access="remote" output="false" returntype="any" httpmethod="OPTIONS" description="Method to respond to AngularJS trial call">
    <cfheader name="Access-Control-Allow-Headers" value="Content-Type,x-requested-with,Authorization,Access-Control-Allow-Origin"> 
    <cfheader name="Access-Control-Allow-Methods" value="GET,OPTIONS">      
    <cfheader name="Access-Control-Allow-Origin" value="*">      
    <cfheader name="Access-Control-Max-Age" value="360">        
</cffunction>
8
Leonid Alzhin

لدي التكوين التالي ، مما أدى إلى نفس الخطأ ، عند طلب ردود من الخادم.

جانب الخادم: SparkJava -> يوفر REST-API
جانب العميل: ExtJs6 -> يوفر تقديم المستعرض

على جانب الخادم اضطررت إلى إضافة هذا إلى الاستجابة:

Spark.get("/someRestCallToSpark", (req, res) -> {
    res.header("Access-Control-Allow-Origin", "*"); //important, otherwise its not working 
    return "some text";
 });

على من جانب العميل اضطررت إلى إضافة هذا الطلب:

Ext.Ajax.request({
    url: "http://localhost:4567/someRestCallToSpark",
    useDefaultXhrHeader: false, //important, otherwise its not working
    success: function(response, opts) {console.log("success")},
    failure: function(response, opts) {console.log("failure")}
});
7
kiltek

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

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

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

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

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

7
sideshowbarker

يمكنك تجاوز المشكلة عن طريق استخدام 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

7
camnesia

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

يمكن للرمز التالي رمي الخطأ 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();
}
5
Loyalar

في حالتي كنت أستخدم تطبيق JEE7 JAX-RS والحيل التالية عملت بشكل مثالي بالنسبة لي:

@GET
    @Path("{id}")
    public Response getEventData(@PathParam("id") String id) throws FileNotFoundException {
        InputStream inputStream = getClass().getClassLoader().getResourceAsStream("/eventdata/" + id + ".json");
        JsonReader jsonReader = Json.createReader(inputStream);
        return Response.ok(jsonReader.readObject()).header("Access-Control-Allow-Origin", "*").build();
    }
5
Bhuwan Gautam

إذا تلقيت رسالة الخطأ هذه من المستعرض:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access

عندما تحاول تنفيذ طلب 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 البعيد كمعلمات. أعطيك مثالًا على كيفية تجاوز هذه المشكلة مع واجهة برمجة تطبيقات بحث فندق 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));

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

تم نسخ الإجابة ولصقها من NizarBsb

4
Flash

لقد تمكنت بنجاح من حل (في حالتي للخطوط) باستخدام htaccess ولكن من الواضح أن OP تطلب مختلفة قليلاً. ولكن يمكنك استخدام نمط FileMatch وإضافة أي نوع من الامتدادات بحيث لا يعطي خطأً في cros.

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

https://httpd.Apache.org/docs/2.4/mod/core.html#filesmatch

4
Danish

بالنسبة إلى واجهة برمجة تطبيقات GoLang:

أولاً يمكنك إلقاء نظرة على MDN CORS Doc لمعرفة CORS. بقدر ما أعرف ، فإن CORS تدور حول السماح لـ Origin Of Request بالوصول إلى Resource Server أم لا.

ويمكنك تقييد أي طلب يمكن لـ Origin الوصول إلى الخادم عن طريق تعيين Access-Control-Allow-Origin على Header من Server Response.

على سبيل المثال ، يعني تعيين العنوان التالي في استجابة الخادم أن الطلب المرسل فقط من http://foo.example يمكنه الوصول إلى الخادم الخاص بك:

Access-Control-Allow-Origin: http://foo.example

وبعد طلب السماح المرسلة من أي المنشأ (أو المجال):

Access-Control-Allow-Origin: *

وكما أعلم في رسالة الخطأ ، يعني requested resource مورد الخادم ، لذلك يعني No 'Access-Control-Allow-Origin' header is present on the requested resource. أنك لم تقم بتعيين رأس Access-Control-Allow-Origin في استجابة الخادم الخاص بك ، أو ربما قمت بتعيين ولكن لم يتم إدراج أصل الطلب في Access-Control-Allow-Origin لذلك لم يتم السماح بالطلب التمكن من:

لا يوجد رأس "Access-Control-Allow-Origin" موجود على المورد المطلوب. الأصل "خالية" غير مسموح بالوصول.

في GoLang ، أستخدم حزمة gorilla/mux لإنشاء خادم API على localhost:9091 ، وأسمح لـ CORS بإضافة "Access-Control-Allow-Origin", "*" لرأس الاستجابة:

func main() { // API Server Code
    router := mux.NewRouter()
    // API route is /people,
    //Methods("GET", "OPTIONS") means it support GET, OPTIONS
    router.HandleFunc("/people", GetPeople).Methods("GET", "OPTIONS")
    log.Fatal(http.ListenAndServe(":9091", router))
}

// Method of '/people' route
func GetPeople(w http.ResponseWriter, r *http.Request) {

    // Allow CORS by setting * in sever response
    w.Header().Set("Access-Control-Allow-Origin", "*")

    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    json.NewEncoder(w).Encode("OKOK")
}

وأنا أستخدم JavaScript في العميل ، في localhost:9092 تقديم طلب بواسطة Chrome ، يمكنك الحصول على "OKOK" بنجاح من Server localhost:9091.

function GetPeople() {
    try {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "http://localhost:9091/people", false);
        xhttp.setRequestHeader("Content-type", "text/html");
        xhttp.send();
        var response = JSON.parse(xhttp.response);
        alert(xhttp.response);
    }
    catch (error) {
        alert(error.message);
    }
}

بالإضافة إلى ذلك ، يمكنك التحقق من رأس طلبك/الاستجابة عن طريق أدوات مثل Fiddler.

4
yu yang Jian

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

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

4
No Refunds No Returns

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

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

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

3
Garrett Tacoronte

في حال كنت ترغب في إصلاح هذا على الواجهة الخلفية (في Flask) ، بدلاً من الواجهة الأمامية ، أوصي تمامًا بحزمة python Flask. دورق قارورة

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

3
Ben Watts

في طلب jsonp ، يجب عليك التقاط "jsonpCallback" وإرساله مرة أخرى.

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

على الجانب الخلفي (إذا كنت تستخدم PHP الخلفي)

echo $_GET['callback'].'({"ip":"192.168.1.1"})';

في هذه الحالة يبدو استجابة الواجهة الخلفية

jQuery331009526199802841284_1533646326884 ({ "الملكية الفكرية": "192.168.1.1"})

ولكن يمكنك تعيين "jsonpCallback" يدويًا على الواجهة الأمامية وإلحاق القبض عليه في الجانب الخلفي

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      jsonpCallback: 'get_ip',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

في هذه الحالة يبدو استجابة الواجهة الخلفية

get_ip ({ "الملكية الفكرية": "192.168.1.1"})

2
Alexey Kolotsey

على موقع الويب الخاص بي (على أساس .NET) لقد أضفت للتو هذا:

<system.webServer>
 <httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>         
</system.webServer>

شكرا جزيلا ل هذا الفيديو.

2
FrenkyB

للتأكد من اكتمالها ، Apache يسمح بالأخطاء:

Header set Access-Control-Allow-Origin "http://www.allowonlyfromthisurl.com"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, Accept-Encoding, Accept-Language, Cookie, Referer"
2
zak

كورس هو لك.

CORS هي "مشاركة الموارد المشتركة للأصل" وهي وسيلة لإرسال طلب عبر المجال. الآن يدعم كل من XMLHttpRequest2 و API Fetch كلا CORS.

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

وإذا كنت تريد أن يقوم أي أصل بإرسال طلب إليك ، فأنت بحاجة إلى JSONP (تحتاج أيضًا إلى ضبط وصول - التحكم - السماح - الأصل ، ولكن يمكن أن يكون "*").

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


إذا كنت تستخدم متصفحًا حديثًا (> Internet Explorer9 أو Chrome أو Firefox أو Edge أو ما إلى ذلك) ، يوصى باستخدام مكون بسيط ولكنه جميل ،https://github.com/Joker- جيلي/كاتا. لا يوجد لديه تبعيات ، أقل من 3 كيلو بايت ، ويدعم Fetch و Ajax و JSONP بنفس بناء الجملة والخيارات الميتة.

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

كما يدعم أيضًا الاستيراد إلى مشروعك ، مثل وحدة ES6 و CommonJS وحتى <script> بتنسيق HTML.

2
Jelly

توضح معظم هذه الإجابات للمستخدمين كيفية إضافة رؤوس CORS إلى خادم يتحكمون فيه.

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

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

لقد حصلت على هذا الخطأ مع $http.get في Angular. كنت بحاجة لاستخدام$http.jsonpبدلاً من ذلك.

2
Travis Heeter

ربما تكون معقدة بعض الشيء ولكن يمكنك استخدام خادم الويب لتوجيه الطلب. مع nodejs لك طعاما هذه المشكلة. أنا لست خبيرا في العقدة شبيبة. لذلك أنا لا أعرف إذا كان هذا هو رمز نظيفة.

لكن هذا يعمل لي

هنا مثال صغير:

NODE JS

var rp = require('request-promise');
var express = require('express'),
    app = express(),
    port = process.env.PORT || 3000;
var options = {
    method: 'POST',
    uri: 'http://api.posttestserver.com/post',
    body: {
        some: 'payload'
    },
    json: true // Automatically stringifies the body to JSON
};
app.get('/', function (req, res) {
        rp(options)
        .then(function (parsedBody) {
            res.send(parsedBody)
        })
        .catch(function (err) {
            res.send(err)
        });
});
app.listen(port);

JS

axios.get("http://localhost:3000/").then((res)=>{
    console.log('================res====================');
    console.log(res);
    console.log('====================================');
})
1
KT Works

بالنسبة إلى خادم Ruby on Rails في application_controller.rb ، أضف هذا:

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
1
张健健

لا يوجد رأس "Access-Control-Allow-Origin" موجود على المورد المطلوب. الأصل ' https://sx.xyz.com ' غير مسموح بالوصول إليه.

كنت قد واجهت أيضًا مشكلة مماثلة في تبادل بيانات النطاق عبر النطاق في استجابة Ajax كـ error undefined . لكن الاستجابة في الرأس كانت رمز الحالة: 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.

الحل للتغلب عليه: في حالتي ، تم استدعاء الدالة checkapikey () عبر Ajax إلى مجال آخر والحصول على استجابة بالبيانات إلى حيث تم إجراء المكالمة:

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();
...
}
1
Nishanth ॐ

هذا الحل سوف يعمل بالتأكيد لك. إضافة مقبض رسالة مخصصة

public class CustomHeaderHandler : DelegatingHandler
{
    protected override async Task<HttpResponseMessage> SendAsync(
            HttpRequestMessage request, CancellationToken cancellationToken)
    {
        HttpResponseMessage response = await base.SendAsync(request, cancellationToken);
        var referrer = request.Headers.Referrer;
        if (referrer != null && !response.Headers.Contains("Access-Control-Allow-Origin"))
        {
            response.Headers.Add("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
        }
        return response;
    }
}

سجل في webapiconfig.cs.

config.MessageHandlers.Add (جديد CustomHeaderHandler ()) ؛

وإذا كنت تستخدم SignalR ، فقم بإضافة هذا الرمز في ملف globle.asax.cs

protected void Application_BeginRequest(object sender, EventArgs e)
        {
            var referrer = Request.UrlReferrer;
            if (Context.Request.Path.Contains("signalr/") && referrer != null)
            {
                Context.Response.AppendHeader("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
            }
        }
1
Ujjwal

بالنسبة إلىOpera(يعمل مثل Chrome ) ، بدأت المتصفح باستخدام هذا الأمر:

opera --user-data-dir="~/Downloads/opera-session" --disable-web-security

حلت المشكلة! يمكنني الآن العمل على ملف HTML محلي (على محرك الأقراص الثابتة الخاص بي) واستدعاء طلبات Ajax إلى أصول بعيدة في نفس الملف.

ملاحظة 1: يمكنك إعطاء أي مجلد في الدليل الرئيسي الخاص بك باسم -user-data-dir.

Note 2: تم اختباره على Debian 8 (Jessie)/Opera 39

 Here is a screenshot

عندما تبدأ بشكل طبيعي (بدون المعلمات أعلاه) ، يقع نفس الطلب في كتلة رمز الخطأ.

0
csonuryilmaz

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

0
bachstein

في حالتي كنت أستخدم التمهيد النابض كخدمة ، يمكنك إضافة تعليق توضيحي للاستخدام الأصل على العملية المسؤولة.

@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(value = "getFoo", method = RequestMethod.GET)
public ResponseEntity getFoo(){
    // do something
} 
0
Chandan Kumar

لقد أنشأت جسرًا بسيطًا في المجال الخاص بي والذي يجلب ويظهر المحتوى من نطاق خارجي.

<?php
header("Content-Type: text/plain");
if (isset($_GET["cnic"]))
{
    $page = file_get_contents("https://external.domain.com/api/verify/" . $_GET["cnic"]);
    echo $page;
}
else
{
    echo "";
}

؟>

الآن ، بدلاً من الوصول إلى المجال الخارجي في AJAX ، وضعت عنوان URL لملف الجسر هذا.

يجب عليك ضبط Content-Type وفقًا لاحتياجاتك. إذا كانت البيانات في JSON ، فاستخدم header("Content-Type: application/json");

0
Muhammad Saqib

فقط لنذكر طريقة أخرى "لتجاوز" ذلك - AJAX الوكيل. إرسال طلب إلى الخادم الخاص بك لجلب البيانات من أصل آخر وإرسال الطلب إليك.

أفضل هذا النهج على JSONP لأنه يحتوي على بعض مشكلات الأمان المحتملة.

0
carobnodrvo

لقد قمت بحل هذا عن طريق تمكين CORS لعنوان URL الخاص بالعميل الذي يصل إلى واجهة برمجة تطبيقات الويب ، وقد نجح في ذلك.

فمثلا:

[EnableCors(origins: "http://clientaccessingapi.com", headers: "*", methods: "*")]
0
Rizwan ali