لا يفرض cURL قواعد CORS. يتم فرض هذه القواعد من قبل المتصفحات لأغراض أمنية.

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

لمعلوماتك ، CORS - تقاسم الموارد عبر المنشأ. نظرًا لأن واجهة برمجة التطبيقات الخاصة بك لا تدعمها ، فلديك خياران -

1. استخدم خادم وكيل على نفس المجال مثل صفحة الويب الخاصة بك للوصول إلى 4chan's API أو ،
2. استخدم خادمًا وكيلاً في أي مجال آخر ، ولكن قم بتعديل الاستجابة لتضمين الرؤوس الضرورية.

أود التصويت لإغلاق هذا الموضوع باعتباره "ليس مشكلة".

شكرا لك على الاقتراح. لقد قمت بتحديث الكود الخاص بي لتوجيه الطلب من خلال وكيل:

axios.get('https://a.4cdn.org/a/threads.json', {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    proxy: {
      host: '104.236.174.88',
      port: 3128
    }
    }).then(function (response) {
        console.log('response is : ' + response.data);
    }).catch(function (error) {
        if (error.response) {
          console.log(error.response.headers);
        } 
        else if (error.request) {
          console.log(error.request);
        } 
        else {
          console.log(error.message);
        }
    console.log(error.config);
});

ومع ذلك ، ما زلت أتلقى هذا الخطأ:

حظر طلب متعدد المنشأ: لا تسمح نفس سياسة المنشأ بقراءة المورد البعيد على https://a.4cdn.org/a/threads.json. (السبب: رأس CORS "Access-Control-Allow-Origin" لا يطابق "https://boards.4chan.org").

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

أي أخبار عن هذا؟ أنا إلى حد كبير في نفس القارب ...

حظر طلب متعدد المنشأ: لا تسمح نفس سياسة المنشأ بقراءة المورد البعيد على https://a.4cdn.org/a/threads.json. (السبب: رأس CORS "Access-Control-Allow-Origin" لا يطابق "https://boards.4chan.org").

هذا لأن https://a.4cdn.org و https://boards.4chan.org يعتبران نطاقين مختلفين. الفرق في a و المجالس

أنا أيضا أواجه نفس المشكلة. هل يمكن لأي شخص مساعدتي في هذا الرجاء

saaaaame

كحل مؤقت يمكنك استخدام هذا: https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

لم أجد شيئًا أفضل الآن ..

PetitBateau لست متأكدًا من كيفية مساعدة امتداد Chrome في إرسال الطلبات عبر Axios.

@ adl1995 لقد فعلت الحيلة بالنسبة لي ؛)

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

لهذا السبب قلت أنه حل مؤقت. وبالطبع لبيئة التطوير.

Access-Control-Allow-Origin هو رأس استجابة وليس عنوان طلب:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

axios.get (url، {headers: {'Access-Control-Allow-Origin': *}}) لا تعني شيئًا!

محاولة
axios.get (url، {crossdomain: true})

ronnin للسجل ، جربت الحل الخاص بك ، لكنه لا يعمل.

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

اقرأ هذا ، الجميع.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

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

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

JigzPalillo هل يمكنك مشاركة الأسلوب أو الكود؟ أنا عالق إلى حد كبير! :(

عادةً ما يعمل هذا ، ولكن في حالة عدم وجوده وليس لديك أي وصول إلى هذا المجال ...

axios.get('https://www.notmydomain.com/1511.json')
    .then(function (response) {
        console.log(response.data);
});

ما فعلته هو إنشاء مكرر على الخادم الخاص بي

axios.get('https://www.mydomain.com/repeater.php?url=https://www.notmydomain.com/1511.json')
    .then(function (response) {
        console.log(response.data);
});

/* repeater.php */
function collect_data($url){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //remove on upload
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_VERBOSE, 1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_AUTOREFERER, false);
    curl_setopt($ch, CURLOPT_REFERER, "https://www.notmydomain.com");
    curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    $result = curl_exec($ch);
    echo curl_error($ch);
    curl_close($ch);
return($result);
}
echo collect_data($_GET["url"]);

يحتاج الخادم إلى الاستجابة برؤوس CORS على استدعاء الخيارات. إذا كنت تستخدم nodejs / express ، فيمكنك إصلاح ذلك لجميع نقاط النهاية باستخدام:

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

لكن هذا فضفاض بعض الشيء. ربما تريد تشديد الإنتاج.

لقد حللت هذه المشكلة منذ فترة طويلة. ينتمي الخادم إلى خدمة 3p وبالتالي فهو خارج عن إرادتي. أنا ببساطة قمت بعمل وكيل له بدلاً من ذلك. كل شيء على ما يرام في تلك الجبهة.

شكرا

steveswork نفس الشيء هنا ، الخادم ينتمي إلى خدمة 3p ، محزن جدًا أنه يمكنني استخدام ajax ، و request.js ولكن ليس axios الذي أفضله 👎

@ adl1995 هل

إنه 2018 الآن ، هل هناك أي تحديث؟

@ تشالنجر 532 كلا لا يزال لا.

الخطأ لا يزال سائدا.

نصيحتي: استخدم مكتبة مختلفة .

حسنًا ، لقد حل هذا النوع من مشكلتي. كما ترى ، أنا أعمل مع vuejs و Laravel ... لقد قمت بإعداد مسار ويب Laravel الخاص بي في php على النحو التالي:

Route::get('distancematrix/{source}/{destination}', function($source,$destination){
 $url = "https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=$source&destinations=$destination&key=YOUR_API_KEY";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_PROXYPORT, 3128);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
curl_close($ch);

return json_decode($response, true);
});

ثم ملف vuejs ، لقد استخدمت أكسيوس ببساطة لإرسال طلب إلى طريقي:

axios.get("distancematrix/place_id:${this.place.source}/place_id:${this.place.destination}").then(response => {
                    console.log('====================================')
                    console.log(response.data)
                    console.log('====================================')
   })

وفويلا ، إنه يعمل بشكل جيد.

إذا كنت تستخدم Laravel ، فإن وظيفة الإضافة:

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

إلى وحدة التحكم أو الطريق قبل العودة
مثال:
Route::get('post',function(){ $jav = Blog::all(); header('Access-Control-Allow-Origin: *'); return $jav; });
اسف للغتى الانجليزيه. نأمل أن يكون هذا يمكن أن تساعدك.

أستخدم vue.js (منفذ المضيف المحلي 8080) و Flask لواجهة برمجة التطبيقات (منفذ المضيف المحلي 5000)

كان علي ببساطة إجراء تغيير بسيط في كود api الخاص بي (Flask على المنفذ 5000).
لقد أضفت flask extension flask-CORS وقمت بتعديل الكود الخاص بي لاستخدامه.
قبل:

from flask import Flask, request
import json
app = Flask(__name__)

بعد، بعدما:

from flask import Flask, request
import json
from flask_cors import CORS
app = Flask(__name__)
CORS(app)

بعد ذلك عملت ويمكنني استخدام API الخاص بي.
لذلك فهي ليست مشكلة أكسيوس حقًا ، ولكن مشكلة واجهة برمجة التطبيقات وتحصل على تحذير من Firefox ليس من استدعاء وظيفة axios.get.

من خلال تعيين الرؤوس وخيارات الوكيل ، حصلت بدلاً من ذلك على Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. .

لكنني تمكنت من الالتفاف على ذلك باستخدام هذا الامتداد: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi؟hl=ar .

للأسف ، نجح ذلك بالأمس فقط وليس اليوم ... كنت أحاول معرفة السبب

طلبات الوكيل باستخدام Webpack dev server لتجنب _cors_ في وضع التطوير

في ملف webpack.config الخاص بك أضف

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://my-target.com',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

المثال أعلاه سيقوم بالوكالة عن الطلب
axios.post(/api/posts/1 ... . . . .
إلى https://my-target.com/posts/1

مثال Git أعلاه ، تحتاج إلى تغيير مثل هذا في طلبك

axios.get('/api/a/threads.json', {
    headers: {
           //  if u have some headers like this
       //  'Authorization': ' Basic //////some values'
    },
    }).then(function (response) {
        console.log('response is : ' + response.data);
    }).catch(function (error) {
        if (error.response) {
          console.log(error.response.headers);
        } 
        else if (error.request) {
          console.log(error.request);
        } 
        else {
          console.log(error.message);
        }
    console.log(error.config);
});

في ملف webpack.config ........

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

وكيل تهيئة حزمة الويب المعدل سيغير طلبك مثل هذا ..

u can see this in chrome dev tool REQUEST HEADERS
https://a.4cdn.org/a/threads.json 

يمكنك استخدام مسارات متعددة في وكيل devServer مثل هذا
في ملف webpack.config ........

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/login": {
    "target": 'https://github.com', // for example
    "pathRewrite": { '^/login': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/post": {
    "target": 'https://facebook.com', // for example
    "pathRewrite": { '^/post': '' },
    "changeOrigin": true
    }
  }
}

استخدم إذا كنت بحاجة

    "changeOrigin": true,
    "secure": false

لقد أمضيت ساعات لإصلاحها ويبدو أنه لا توجد مساعدة في كل مكان. الطريقة البسيطة والسريعة هي إضافة امتداد chrome يسمى Allow-Control-Allow-Origin *. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi؟hl=ar

سيساعدك فقط ولكن ماذا عن الآخرين؟

مفيد إلى حد ما: https://github.com/shalvah/cors-escape

محاولة Vue و axios من الواضح أنني حصلت على نفس المشكلة.

لقد جربت للتو الحل المقدم من sundar6445 وهو يعمل بشكل مثالي.
ملف تهيئة webpack الذي قمت بتعديله موجود بتنسيق/config/index.js. لقد فضلت تعديل هذا منذ الإشارة إليه في/build/webpack.dev.conf.js

في ذلك تجد

module.exports = {
  dev: { 
...
proxyTable: {},

كما هو موضح بواسطة sundar ، قم بتغيير proxyTable بشيء مثل

proxyTable: ({
      '/events': {
        "target": 'http://localhost:3000',
        "changeOrigin": true,
        "secure": false
      }
    }),

مما يعني أن كل شيء يبدأ بـ / events سيتم توجيهه إلى http: // localhost : 3000 / events. لا يوجد "pathRewrite" في حالتي ، سيكون عنوان url النسبي هو نفسه.

وبالطبع ، لا تنس إزالة عنوان URL الكامل في مكون Vue الخاص بك. كان لدي:

  mounted () {
    axios.get('http://localhost:3000/events/nb')
      .then(result => {
        this.new_et_nb = result.data
        console.log('*******' + JSON.stringify(result) + ', ' + result.data)
      }, error => {
        console.error(error)
      })
  }

ستصبح:

  mounted () {
    axios.get('/events/nb')
      .then(result => {
        this.new_et_nb = result.data
        console.log('*******' + JSON.stringify(result) + ', ' + result.data)
      }, error => {
        console.error(error)
      })
  }

وهو يعمل بشكل جيد. بفضل @ sundar6445

أتمنى أن يساعدك هذا

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

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

لا يوجد خيار مثل crossDomain داخل Axios. يرجى دراسة الكود المصدري قبل إعطاء / استخدام أدلة خاطئة.

لا يمكنك تنفيذ JavaScript على عميل (بدون تعطيل CORS وجعلك هدفًا لـ XSS) لاسترداد المعلومات من موقع آخر.

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

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

أعتقد أن تكوين الرأس هذا سيحل هذه المشكلة.

headers: { 'content-type': 'application/x-www-form-urlencoded' }

شكرا

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

المشكلة ليست مع الأكسيوس. القضية مع الخادم. عند تقديم البيانات ، يجب عليك إضافة الرؤوس التالية قبل إرسالها.

يجب ضبط Access-Control-Allow-Origin على *

يجب تعيين Access-Control-Allow-Headers على Origin و X-Requested-With و Content-Type و Accept

المصدر: خطأ CORS أثناء إجراء مكالمة axios.get

بالإشارة إلى هذه الإجابة ، أضفت هذه السطور إلى الخادم السريع الخلفي الخاص بي ، مثل:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://127.0.0.1:8080"); //My frontend APP domain
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
});`

المصدر: CORS on ExpressJS

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

أخيرًا ، أعتقد أن هذه الإجابة الأخرى

كيفية تجنب اختبار CORS المبدئي
كيفية استخدام بروكسي CORS للالتفاف حول مشاكل "لا يوجد تحكم في الوصول - السماح بالعنوان الأصلي"
كيفية إصلاح عنوان "Access-Control-Allow-Origin يجب ألا يكون هو مشاكل أحرف البدل"

آمل أن يساعد.

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

هذا واحد سوف يعمل:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

لقد اصطدمت بهذه المشكلة منذ بعض الوقت أثناء إنشاء 4webm و 4chan-list-webm

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

crossdomain: صحيح

اضطررت إلى تمكين المنفذ "8080" على الواجهة الخلفية CORS ثم عمل.

يؤمن

توثيق webpack لفهم أفضل: https://webpack.js.org/configuration/dev-server/#devserver -proxy

إذا كنت تستخدم Laravel أو lumen لواجهة برمجة التطبيقات الخلفية. وأنت تستخدم حزمة barryvdh / laravel-cors بالفعل. الحل هو تعيين cors.php config ليكون رأس وطريقة وجزء الأصل على هذا النحو
'allowedOrigins' => ['*'], 'allowedHeaders' => ['*'], 'allowedMethods' => ['*'],
نأمل أن تحل مشكلة شخص ما

إذا قمت بذلك في Safari ، فلن يستغرق الأمر وقتًا ، ما عليك سوى تمكين قائمة المطور من التفضيلات >> المتقدمة ، وحدد "تعطيل القيود عبر الأصل" من قائمة التطوير. إذا كنت تريد محليًا فقط ، فأنت تحتاج فقط إلى تمكين قائمة المطور ، وتحديد "تعطيل قيود الملفات المحلية" من قائمة التطوير.

وفي Chrome لـ OSX افتح Terminal وقم بتشغيل:

$ open -a Google\ Chrome --args --disable-web-security --user-data-dir

--user-data-dir مطلوب على Chrome 49+ على OSX

بالنسبة لنظام التشغيل Linux:

$ google-chrome --disable-web-security
أيضًا إذا كنت تحاول الوصول إلى الملفات المحلية لأغراض التطوير مثل AJAX أو JSON ، فيمكنك استخدام هذه العلامة أيضًا.

-–allow-file-access-from-files
بالنسبة لنظام التشغيل Windows ، انتقل إلى موجه الأوامر وانتقل إلى المجلد حيث يوجد Chrome.exe واكتب

chrome.exe --disable-web-security
يجب أن يؤدي ذلك إلى تعطيل نفس سياسة الأصل والسماح لك بالوصول إلى الملفات المحلية.

جرب كل الحل المذكور أعلاه. لا شيء يعمل.
وجدت أخيرًا واحدة - https://github.com/expressjs/cors
آمل أن يساعدك يا ​​رفاق

المشكلة الرئيسية هي الفرق بين طلبات الخادم وطلبات العميل.

عندما تقدم طلبات عبر العميل (ويعرف أيضًا باسم المتصفح في معظم الأحيان) ، فأنت تحت رحمة برنامج المتصفح. يتمثل المعيار القياسي لبرنامج المتصفح في منع أي محاولات للنشاط الضار قد تأتي أو لا تأتي من برامجك الخاصة.

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

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

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

mddanishyusuf حل لي.

أعتقد أن تكوين الرأس هذا سيحل هذه المشكلة.

headers: { 'content-type': 'application/x-www-form-urlencoded' }

شكرا

شكرا! ؛)

من هنا: https://github.com/axios/axios لقد أدركت أنهم لم يضعوا عنوان url كاملاً لطلب عنوان url الخاص بـ axios.

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

axios.get('/sample/request')

ثم http://127.0.0.1 : سيرسل 8080 / sample / request طلبًا آخر إلى https://a.4cdn.org/ ويعيد الردود إلى axios بصيغة json.

إنه يعمل بالنسبة لي ، آمل أن يساعدك

https://github.com/axios/axios/issues/853#issuecomment -408218917 عملت مع fetch API وواجهة برمجة تطبيقات الويب .NET 4.5.

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

كان الحل:
استيراد الوكيل من "http-proxy-middleware"
app.use ('/ api / **'، proxy ({target: "http: // localhost: 8080"}))؛

كنت أعاني من نفس المشكلة وقمت بحلها بتثبيت 'cors' في الواجهة الخلفية (Express).

يركض:
npm تثبيت كور

ثم فقط قم بتعيين هذا:

var cors = require('cors');
app.use(cors());

شكرًا fernandoruch ، هذا يعمل مع خادم nodejs الخاص بي

كان لدي نفس المشكلة وقمت بحلها

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

عملت في البداية ، ولكن بعد ذلك توقف ولم أستطع معرفة السبب.

ثم أدركت أنني قمت بنقل كل الكود الخاص بي إلى ملف آخر لذلك أحتاج إلى استخدام جهاز التوجيه:

router.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

أهلا،

أي تحديث لهذه المشكلة ، أنا أستخدم .net core 2.1 و axios 0.18.

شكرا.

لا أعتقد أن المشكلة في أكسيوس ، المشكلة في خادمك الخلفي.

بالنسبة لي ، لدي بنية مع Flask في النهاية الخلفية وأستخدم axios في Vue.JS ، الشيء الوحيد الذي كان علي فعله على خادم Flask الخاص بي هو:

...
from flask_cors import CORS
...
CORS(app)

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

كحل مؤقت يمكنك استخدام هذا: https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

لم أجد شيئًا أفضل الآن ..

فكرة سيئة

واجهت هذه المشكلة عندما حاولت ببساطة تقديم طلب axios.get() إلى Darksky weather api. عندما قرأت صفحة الأسئلة الشائعة في Darksky ، وجدت سؤالًا يتعلق بهذه المشكلة بالضبط ، أجابوا بالقول إنهم استخدموا هذا كإجراء أمني لمنع الوصول الضار غير المقصود إلى معلوماتهم واقترحوا إنشاء وكيل للوصول إلى قاعدة البيانات الخاصة بهم.

لقد أجريت التغيير التالي على ملفي package.json (أنا أستخدم تطبيق create-response):

{
  "proxy": "https://api.darksky.net/forecast/[myKey]
}

myKey لي من Darksky للوصول إلى بياناتهم.

كان هذا إصلاحًا بسيطًا للغاية وعمل معي! أظن أن العديد من خدمات API ستبدأ في استخدام هذا كإجراء أمني. آمل أن يساعد الحل الخاص بي الآخرين في مشكلات مماثلة.

باختصار: قم بإنشاء وكيل.

شكرا لكfernandoruch . إنه يعمل بالنسبة لي عندما أقوم بإضافته إلى app.js من خادم node.js

var cors = require('cors');
app.use(cors());

import axios from 'axios'
import jsonpAdapter from 'axios-jsonp'

axios.get(`${url}`, { adapter: jsonpAdapter })
        .then(result => {
            console.log('Status Code: ' + result.status)
        })
        .catch(error => console.log('Request failed'))

يتم استخدام JSONP (JSON with Padding أو JSON-P) لطلب البيانات من خادم موجود في مجال مختلف عن العميل. يتيح JSONP مشاركة البيانات التي تتجاوز سياسة المصدر نفسه.

أنا فقط استخدم jquery's .get لمكالمات API الخارجية.

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

هذا واحد سوف يعمل:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

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

لقد جئت للتو عبر هذه القضية. كان لدي {withCredentials: true} (نسخة ولصق من واجهة برمجة التطبيقات الأخرى الخاصة بي) لواجهة برمجة تطبيقات الطرف الثالث هذه للعمل ، لقد قمت ببساطة بإزالة {withCredentials: true}

هذا الحل يعمل بالنسبة لي

axios.get(myurl, {
    crossDomain: true
}).then(res => { 
    console.log(res);
}).catch(error => {
    console.log('error', error);
})

مرجع https://stackoverflow.com/questions/42422494/cross-domain-at-axios

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

هذا واحد سوف يعمل:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

غير عادي يعمل !!!

واجهنا هذه المشكلة أيضًا عند التبديل إلى المحاور
إعدادنا هو webpack + devServer (مع الوكيل) + axios

كانت المشكلة أننا استخدمنا عنوان url الخاص بواجهة برمجة التطبيقات بالكامل كعنوان URL أساسي في axios بدلاً من "/ api" فقط (يقوم الوكيل بالتعيين عبر السمة الهدف)

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

تحقق مما إذا كان القارورة أو الخادم الآخر قد تم تمكين CORS فيه.
تحقق أيضًا مما إذا كان عنوان الخادم صحيحًا. لقد علقت فقط لأنني نسيت إضافة منفذ الخادم.
axios.get ("http: // localhost: 5000 / jsonshow")
ثم (الاستجابة => (this.array = response))

قم بتغيير " localhost: 3000 " إلى " http: // localhost : 300" للعمل بشكل جيد معي (تأكد من تمكين cors على serveride)

قم بتغيير " localhost: 3000 " إلى " http: // localhost : 300" للعمل بشكل جيد معي (تأكد من تمكين cors على serveride)

إذا كنت تعمل على المنفذ 300 وليس 3000.

في VueJS يمكنك إنشاء حقير يسمى vue.config.js في جذر المشروع إذا لم يكن موجودًا وإضافة شيء مثل

module.exports = {
  devServer: {proxy: 'http://localhost:3000'}
}

ثم يجب أن تبدو مكالمتك Axios كما هي

axios.get('/api/say_hello', {})

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

هذا واحد سوف يعمل:

axios.get ( ${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json )
ثم (الدقة => {
console.log (الدقة)
})

هذا واحد يعمل من أجلي! شكرا!

جرب هذه :

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';

Vue.config.productionTip = false;

// ======================
axios.defaults.withCredentials = false;
axios.defaults.proxy = {
  host: 'http://localhost',
  port: 5000,
};
// ======================
new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

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

هذا واحد سوف يعمل:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

توفير وقتي ، شكرا جزيلا لك!

ronnin للسجل ، جربت الحل الخاص بك ، لكنه لا يعمل.

لما؟ حقا؟ بالنسبة لي عملت بالتأكيد ...
بالنسبة لطريقة GET ، تعمل مثل السحر!

هذا هو المثال الذي قدمته باستخدام واجهة برمجة تطبيقات عامة ، بناءً على تعليق ronnin :
axios.get('https://world.openfoodfacts.org/api/v0/products', { crossdomain: true }) .then(function (response) { console.log(response.data); })

إنه 2019 الآن ، هل هناك أي تحديث؟ 😃

أستخدم امتداد الكروم هذا لتطوير تطبيقي
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

ronnin للسجل ، جربت الحل الخاص بك ، لكنه لا يعمل.

الرجال الذين يواجهون مشاكل لا يتم تقديرهم جيدًا لدى CORS ، وعليهم قراءة المقال @ seungha-kim المذكور سابقًا: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

كملخص:

1. يجب أن توفر الموارد البعيدة التي طلبتها ، إذا لم تكن على نفس المضيف الذي تطلب منه (ما يسمى: original) ، رأس CORS إضافيًا إلى جانب المورد ، ويعرف أيضًا باسم. السماح بالتحكم في الوصول: المضيف (الأصل) والعناوين والأساليب وما إلى ذلك.
2. الطلب بواسطة المتصفحات أو curl بالعنوان "Access-Control-Request-Method" ، والطلب باستخدام الطريقة "OPTIONS" ستتم تجربته أولاً تلقائيًا قبل الطريقة المقصودة: "GET" ، "POST" ، إلخ.
   مما يعني أن معالجات الموارد البعيدة يجب أن تتعامل مع الأسلوب "OPTION" بشكل خاص. على سبيل المثال (nginx):
   "" رائع
   الموقع / المورد البعيد {
   إذا كان (request_method $ = 'OPTIONS') {
   add_header 'Access-Control-Allow-Origin' $ http_origin؛
   add_header 'Access-Control-Allow-Headers' DNT ، Keep-Alive ، User-Agent ، X-Requested-With ، If-Modified-Since ، Cache-Control ، Content-Type ، Authorization '؛
   add_header 'Access-Control-Allow-Methods' OPTIONS، GET، POST، PUT، PATCH، DELETE '؛
   add_header 'Access-Control-Allow-Credentials' true ؛
   add_header "Access-Control-Max-Age" 1728000 ؛ # 20 د

    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
   return 204;
  }
 // more ...

}
""

1. كما هو مذكور أعلاه ، لم أستخدم القيمة * لكل رؤوس Access-Control-Allow- *.
   القيمة * ، لها العديد من القيود.
   أ. القيمة * إلى Access-Control-Allow-Origin و Access-Control-Allow-Headers و Access-Control-Allow-Methods لا يمكن أن تعمل مع Access-Control-Allow-Credentials = true. إذا كان ملف تعريف الارتباط مطلوبًا مع الطلب ، فستحتاج إلى Access-Control-Allow-Credentials = true
   ب. فقط * صالح ، * google.com غير صالح

1. Access-Control-Allow-Headers هي قائمة برؤوس طلبك ربما مع. سيؤدي وجود بعض العناوين غير المدرجة فيها إلى حظرك. ما عليك سوى التحقق من العناوين واختيارها في Access-Control-Allow-Headers

2. المشكلة في الغالب ليست في العميل (المتصفح ، تطبيق العميل الخاص بك) ، ولكن في المورد المطلوب الموجود على الخادم.

3. التحدث إلى زميل التطوير من جانب الخادم

آمل أن يكون مفيدًا

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

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

استخدم التطبيق التالي أدناه لجعل طلباتك تعمل

لقد نجحت معي على الرغم من أن الخادم

https://cors-anywhere.herokuapp.com/

استعمال:

url = https://cors-anywhere.herokuapp.com${url} ؛
"

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

إذا كان طلب GET الخاص بي يطلب موردًا من بعض الخوادم التي لم تقم بتمكين CORS ، فلا يوجد شيء يمكننا القيام به من الواجهة الأمامية من خلال طلب XHR (المعروف أيضًا باسم طلب AJAX) مباشرةً. نعم!
إنه المتصفح الذي يتبع البروتوكول ويرفض طلبك.
ولكن ، يمكنك الحصول على المورد عن طريق طلب المتصفح التقليدي ، مثل location.href ، iframe ، form.action

في الغالب ، قمنا بإعداد خادم وكيل عكسي ذاتي ، (مثل nginx) ، مع جانب خادم متحكم فيه ذاتيًا لحل المشكلة التي تتطلب موردًا ثلاثي الأبعاد بدون تمكين CORS.
تطبيق Heroku ، ذكر ndjerrou ، هو الحال.

لدينا سيارات ذاتية القيادة وذكاء اصطناعي ولكننا ما زلنا نكافح مع CORS

تمكنت من حل هذا باستخدام heroku كوكيل.

هنا هو الكود الخاص بي.

fetch("https://cors-anywhere.herokuapp.com/boards.4chan.org/biz/thread/13932651.json")
           .then(res => { //returns a readable stream
                  res.body.getReader().read().then(r => { //returns a Uint8 buffer array
                       var result = new TextDecoder("utf-8").decode(r.value); //Decodes the buffer array into a string
                           console.log(JSON.parse(result)) //the result you want
                   })
            })

إنه عام 2020 الآن ، هل هناك أي تحديث؟ 😃

يمكن أن يؤكد ، عام 2020 ولا يزال بدون تحديث.
fetch () لديه الوضع mode: 'no-cors' ، لماذا لا يحتوي Axios على شيء مشابه؟

حاولت

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

ولم يعمل أي من هذه الرؤوس. حاولت withCredentials في كل من الحالتين الصواب والخطأ ، ولم أفلح.

مع الجلب ، إنه يعمل فقط.

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

تحتاج إلى تعريف "Access-Control-Allow-Origin": 'YOUR_IP:YOUR_PORT' في رؤوس الاستجابة "ليس في رؤوس الطلب".

يمكن أن يؤكد ، عام 2020 ولا يزال بدون تحديث.
fetch () لديه الوضع mode: 'no-cors' ، لماذا لا يحتوي Axios على شيء مشابه؟

حاولت

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

ولم يعمل أي من هذه الرؤوس. حاولت withCredentials في كل من الحالتين الصواب والخطأ ، ولم أفلح.

مع الجلب ، إنه يعمل فقط.

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

لا توجد مشكلة في الأكسيوس ، ولهذا السبب تم إغلاق القضية. فقط خذ كرسيًا واقرأ المقال على شبكة مطوري موزيلا: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

南辕北辙 ， 徒劳无功

شكرا يا رفاق ، هذا ساعد! عفوا عن الإزعاج!

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

حاولت استخدام Wikipedia API وكان لدي نفس المشكلة.
إضافة origin=* إلى عنوان URL تم إصلاحه.

const endpoint = `https://en.wikipedia.org/w/api.php?action=query&origin=*&list=search&srsearch=${searchTerm}&format=json`;

لقد قمت بحلها من خلال عدم استخدام axios ، وحاولت الحصول على عناوين URL خارجية باستخدام $ ajax و $ get ، ولم يكن لدي أي مشكلة مع عناصر jquery القديمة. إنه خطأ بالتأكيد.

إنه عام 2021 الآن ، هل هناك أي تحديث؟ 😃

أواجه مشكلة مماثلة تتعلق بـ "التحكم في الوصول والسماح بالرؤوس" أثناء محاولة الوصول إلى خطاف ويب زابير من axios (0.18.0) و chrome (75.0.3770.100).

طلبي هو:

axios.post("https://hooks.zapier.com/hooks/catch/xxx/xxxx", { email });

سأتلقى خطأ حول الرأس غير المدعوم:

تم حظره بواسطة سياسة CORS: نوع محتوى حقل رأس الطلب غير مسموح به بواسطة Access-Control-Allow-Headers في استجابة الاختبار المبدئي

بعد قراءة هذه الصفحة ، أفهم:

• 1. يحتاج Zapier إلى تكوين استجابة الخادم الخاصة بهم لدعم رؤوس التحكم في الوصول إلى "نوع المحتوى" على الأقل
• 1. أحتاج إلى تكوين طلبي لاستبعاد فحص رأس "نوع المحتوى" بطريقة ما أثناء الاختبار المبدئي OPT.

هل هناك أي اقتراحات لتحقيق الخيار الثاني؟ تقترح مشاكل Zapier

تحرير: أنا مقتنع أن هذا ليس له علاقة تذكر / لا علاقة به مع أكسيوس ، ولكنه دعم ضعيف في نهاية زابير. يبدو أن الطلب يعمل بعد التبديل إلى GET مع معلمات URL.

حسنًا ، إذا ذكروا في الأسئلة الشائعة عدم الحاجة إلى أي معلمات لنوع المحتوى
يمكن أن يجرب فقط رأ
Var xhr = XMLHTTPRequest () جديد وجربه بهذه الطريقة بدون محاور.

هل منشورك على الويب هوك على العميل أو الخادم؟

في الثلاثاء ، 25 حزيران (يونيو) 2019 ، الساعة 3:27 مساءً ، كتب بيت شميتز إخطارات github.com:

أواجه مشكلة مشابهة متعلقة بـ "التحكم في الوصول والسماح بالرؤوس"
أثناء محاولة ضرب خطاف ويب zapier من axios (0.18.0) و chrome
(75.0.3770.100).

طلبي هو:

axios.post ("https://hooks.zapier.com/hooks/catch/xxx/xxxx"، {email}) ؛

سأتلقى خطأ حول الرأس غير المدعوم:

تم حظره بواسطة سياسة CORS: نوع محتوى حقل عنوان الطلب غير مسموح به
عن طريق Access-Control-Allow-Headers في استجابة الاختبار المبدئي

[صورة: صورة]
https://user-images.githubusercontent.com/3190970/60138000-9ccdda80-975d-11e9-8f6d-e47bcffe91f1.png

بعد قراءة هذه الصفحة ، أفهم:

-
1. يحتاج Zapier إلى تكوين استجابة الخادم للدعم
Access-Control-Request-Headers لـ "نوع المحتوى" على الأقل
-
1. أحتاج إلى تكوين طلبي لاستبعاد ملف
فحص رأس "نوع المحتوى" أثناء الاختبار المبدئي OPT.

هل هناك أي اقتراحات لتحقيق الخيار الثاني؟ مشاكل زابير الشائعة
حول رؤوس التحكم في الوصول
https://zapier.com/help/common-problems-webhooks/#posting-json-from-web-browser-access-control-allow-headers-in-preflight-response-error
يقترح "عدم تخصيص نوع المحتوى" لطلبك. ومع ذلك ، أنا
ليس لديها أي خيارات رأس في طلبي ، ولا أي رؤوس افتراضية
مهيأ على أكسيوس ، لذا لا يمكنني إلا أن أفترض أن هذا ضمني في نهاية أكسيوس؟

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/axios/axios/issues/853؟email_source=notifications&email_token=AHVHGUIDC6DW3YPEKZ2HHZTP4KLWHA5CNFSM4DIVKOX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW50
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/AHVHGUKX32PVCFPCZGRURD3P4KLWHANCNFSM4DIVKOXQ
.

أي أخبار عن هذا؟ أنا في نفس القارب إلى حد كبير.

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

لديك بعض الخيارات:

إذا كنت تتحكم في الخادم الذي تطلبه ، فاسمح له بالاستجابة لجميع طلبات OPTIONS بالعناوين التالية:

Access-Control-Allow-Origin: https://www.mywebsite.com <<REPLACE WITH YOUR SITE - USE COMMA IF MORE THAN ONE>>
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Access-Control-Allow-Origin

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

app.options('/*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://www.mywebsite.com');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');
    res.send(HttpStatusCode.OK);
});

يجب عليك أيضًا إلحاق رأس Access-Control-Allow-Origin: https://www.mywebsite.com' <<replace with your website or list of sites>> للاستجابة.

app.get('/my-cors-friendly-route', async (req, res, next) => {
   const data = await this.http.get('https://www.someothersite.com');
   res.append('Access-Control-Allow-Origin', 'https://www.mywebsite.com');
   res.json(data)
});

ببساطة ، يعرف المتصفح متى تطلب موردًا على أصل (مجال) مختلف ، لذلك يرسل فحصًا مبدئيًا (باستخدام نوع طريقة طلب OPTIONS ، وليس GET ، POST وما إلى ذلك) ، لمعرفة ما إذا كان الخادم يقول إنه موافق لتلقي الطلب. إنه إجراء أساسي لأمان المتصفح لتقليل فرصة استخدام موقع ويب تابع لجهة خارجية باستخدام واجهة برمجة التطبيقات الخاصة بك - وهو ما قد لا ترغب فيه. يقول الكود أعلاه بشكل أساسي أنه لا بأس من أن يستهلك موقع ويب معين واجهة برمجة التطبيقات. إذا كان من الممكن استهلاكها من قبل جميع مواقع الويب ، فستقوم بتعيين Access-Control-Origin: * .

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

@ Aitchy13 يحتوي خادم واجهة برمجة التطبيقات الذي Access-Control-Origin: * ، تعطيني وحدة التحكم هذا الخطأ كما هو الحال في هذه المشكلة ،

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ‘https://<my_api_host>/Data/Login/’. (Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).

كما تقول ، لإضافة ...

res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');

... لكن ليس Access-Control-Allow-Origin فقط للردود وليس للطلبات؟

غير مدعوم إذا Access-Control-Allow-Origin : * ... غريب جدًا.

إليك بعض رؤوس استجابة API لبعض المراجع للمساعدة في الحلول الممكنة المستقبلية:

(هذا خارج طلب طريقة OPTIONS قبل الطلب الفعلي الذي تم رفضه بسبب CORS)
رؤوس الاستجابة

HTTP/1.1 204 No Content
Date: Fri, 28 Jun 2022 04:08:58 GMT
Server: Apache
X-DNS-Prefetch-Control: off
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Surrogate-Control: no-store
Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
Pragma: no-cache
Expires: 0

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Headers: api-key,content-type

Vary: Access-Control-Request-Headers
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive

أو لدي شيء خاطئ؟ كنت على وشك قطع جهاز الكمبيوتر المحمول إلى النصف حول هذه المشكلة.

واجهت نفس المشكلة ، بعد عدة محاولات ، واختبار بعض الحلول ، لم ينجح أي منها. فقط بعد ضبط الوكيل في package.json.
يضيف:
"الوكيل": "عنوان api"
أنه سيتخطى الكورسات.

IkarosFeitosa هل يمكنك نشر تكوين وكيل التكوين الخاص بك؟

zacharytyhacz ، لا يمكنك إرسال بيانات اعتماد المتصفح عندما يستجيب الخادم بـ Access-Control-Allow-Origin: * .

إما:

1. قم بتغيير * ليكون عنوان موقع ويب محدد.
2. عيّن ...withCredentials: false في معلمة config / options لوظيفة طلب axios التي تستخدمها.
3. اضبط خاصية الوكيل في معلمة config / options لوظيفة طلب axios التي تستخدمها ، إلى وكيل صالح (المثال أدناه)

proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }

أي تقدم؟ أقوم بتكوين خادم الويب الخاص بي لتعيين رأس resposne ، ولكن يبدو أنه لا يعمل.

أنا أخلط بين نصيحة الخطأ هذه:

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

أحاول تكوين cors الخادم الخاص بي مع fetch api ، فهو يعمل بشكل جيد.

إذا كنت تستخدم nodejs مع express . هذا المنشور قد يساعدك.

إذا كنت تريد فقط أن يكون بعض المسار مع رموز مسموح بها على سبيل المثال:
/home/fridge - غير مسموح به من أصول أخرى
/home/toilet - يجب السماح به من أصول أخرى

يمكنك تجربة التنفيذ التالي (عملت معي)

في المسارات / home.js

const express = require('express')
const router  = express.Router()

router.options("/toilet", function(req, res, next){
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
  res.send(200);
});

إذا كنت لا تستخدم nodejs مع express - فجرّب googling لطلب طريقة OPTIONS

تم الاختبار من express: 4.16.3

لا ، :) إنها مشاكل عند التطوير (نستخدم http)
عندما نصدر على الخادم (نستخدم https)
لم يحدث ذلك.
لذا فقط قم بتثبيت الإضافة على: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi؟hl=ar

app.use (الوظيفة (req ، الدقة ، التالي) {
res.header ('Access-Control-Allow-Origin'، '*') ؛
res.header ('Access-Control-Allow-Headers'، 'Origin، X-Requested-With، Content-Type، Accept') ؛
التالي()؛
}) ؛

هذا حل حياتي !!

شكرا لك على الاقتراح. لقد قمت بتحديث الكود الخاص بي لتوجيه الطلب من خلال وكيل:

axios.get('https://a.4cdn.org/a/threads.json', {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  proxy: {
    host: '104.236.174.88',
    port: 3128
  }
  }).then(function (response) {
      console.log('response is : ' + response.data);
  }).catch(function (error) {
      if (error.response) {
        console.log(error.response.headers);
      } 
      else if (error.request) {
        console.log(error.request);
      } 
      else {
        console.log(error.message);
      }
  console.log(error.config);
});

ومع ذلك ، ما زلت أتلقى هذا الخطأ:

حظر طلب متعدد المنشأ: لا تسمح نفس سياسة المنشأ بقراءة المورد البعيد على https://a.4cdn.org/a/threads.json. (السبب: رأس CORS "Access-Control-Allow-Origin" لا يطابق " https://boards.4chan.org ").

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

مرحبًا يا شباب ، جرب هذا قبل مكالمة أكسيوس ، لقد نجحت معي

headers.set('Content-Type', 'application/json')

كان هذا هو الحل

const key = 'sdmhfkhskdfhkshdkfhsdhfksl';
    const locationUrl = `https://api.fjdsghfjsdghfjgshdjfg`;
    axios.defaults.headers.common['x-api-key'] = key;
    const myresult = await axios.get(locationUrl, { crossdomain: true }).then((result) => {
        return result.data;
    });

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

يحرر:
https://youtu.be/hxyp_LkKDdk

إنه عام 2021 الآن ، هل هناك أي تحديث؟ 😃

نعم ، أنا مهتم جدًا بقرفتي ، وكان علي أن أتحقق من ذلك العام

ما عليك سوى استخدام fetch لاختبار ما إذا كانت كورسات الخادم تعمل أولاً.

و...

axios طلب koa-server ، ولكن ليس iris مباشرة ، فكلاهما يستخدم برامج وسيطة شهيرة.

1358

لماذا لا يوجد حل رسمي لهذه المشكلة؟ قرأت من خلال هذا الموضوع برمته وأشعر بالحيرة لما يبدو أنه مشكلة عالمية لا أحد يحلها حقًا بأي طريقة قياسية.

لماذا لا يوجد حل رسمي لهذه المشكلة؟ قرأت من خلال هذا الموضوع برمته وأشعر بالحيرة لما يبدو أنه مشكلة عالمية لا أحد يحلها حقًا بأي طريقة قياسية.

إن قضية CORS برمتها ليست Axios ولا حتى JavaScript نفسها. إنها ميزة أمان مضمنة في معظم أو كل المتصفحات. هناك طرق "للتطفل" حولها ، ولكن الأمر متروك للخادم للرد بالرؤوس الصحيحة.

لماذا لا يوجد حل رسمي لهذه المشكلة؟ قرأت من خلال هذا الموضوع برمته وأشعر بالحيرة لما يبدو أنه مشكلة عالمية لا أحد يحلها حقًا بأي طريقة قياسية.

إن قضية CORS برمتها ليست Axios ولا حتى JavaScript نفسها. إنها ميزة أمان مضمنة في معظم أو كل المتصفحات. هناك طرق "للتطفل" حولها ، ولكن الأمر متروك للخادم للرد بالرؤوس الصحيحة.

إذن ، بالنظر إلى هذا الرد ، ما هي الطريقة الأكثر "نجاحًا" لتنفيذ إصلاح لمشكلة CORS إذن؟

حسنًا ، بعد يومين من البحث حصلت عليه أخيرًا.

بالحديث بدقة ، هذه ليست قضية أكسيوس. في الواقع لا يجب حتى اعتبار هذا مشكلة. تم تصميم Axios للعمل وفقًا لكل معايير CORS الغريبة والمزعجة ، لذا من المتوقع حدوث الرسالة: CORS header ‘Access-Control-Allow-Origin’ missing من المتوقع أن يحدث ، thar هو العمل الصحيح للمحاور. في المثال مع 4chan api ، كما قيل من قبل ، المشكلة ليست أكسيوس ، هي 4chan api نفسها التي لا تتبع معايير CORS.

اقترح بعض الأشخاص الحيلة القديمة المتمثلة في استخدام وكيل للتعامل مع 7 تجنب كل عمليات التحقق من صحة الرؤوس. إليك مدونة من Negar Jamalifard توضح كيفية القيام بالخدعة: https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 بالمناسبة ، لست متأكدًا مما إذا كان يمكن اعتبار ذلك ممارسة سيئة.

في حالتي ، كنت أحاول الاتصال بـ asp net core api في المضيف المحلي الخاص بي حتى أدرك أكسيوس ، قبل إرسال طلب الحصول الخاص بي ، كان يرسل تلقائيًا "طلبات الاختبار المبدئي" التي ترسل كطريقة OPTIONS التي كان خادمي غير مستعد للتعامل معها. إذا كان هناك شخص يلومه على Chrome و Firefox لعرض رسالة غامضة للغاية.

اقترح بعض الأشخاص الحيلة القديمة المتمثلة في استخدام وكيل للتعامل مع 7 تجنب كل عمليات التحقق من صحة الرؤوس. إليك مدونة من Negar Jamalifard توضح كيفية القيام بالخدعة: https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 بالمناسبة ، لست متأكدًا مما إذا كان يمكن اعتبار ذلك ممارسة سيئة.

إذن ، مجرد إنشاء وكيل هو أفضل حالة ممكنة لهذه المكالمات؟ هذا عار.

إذن ، مجرد إنشاء وكيل هو أفضل حالة ممكنة لهذه المكالمات؟ هذا عار.

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

لقد قمت بحل المشكلة:
بالنسبة إلى المحاور: url = " http: // localhost : 8080" الطريقة = 'post'
لاستجابة خادم Django:
uesrItem = {'user': 'xxx'}
الاستجابة = JsonResponse (عنصر المستخدم)
استجابة ["Access-Control-Allow-Origin"] = " http: // localhost : 8080"
استجابة ["Access-Control-Allow-Credentials"] = 'true'
استجابة ["Access-Control-Allow-Methods"] = "POST ، OPTIONS"

المشكلة ليست أكسيوس ، ولكن واجهة برمجة التطبيقات التي تطلبها!

على سبيل المثال ، قمت بترميز API في Flask وكانت طريقة GET:

@app.route('/api/autores', methods=['GET'])
def get_users():
    drivers_json = []
    for user in user_dao.list_users():
        drivers_json.append(user.to_json())
    return make_response(jsonify(drivers_json), 201)

ولكن تم حل المشكلة عندما أضفت رأسًا في استجابة API:

@app.route('/api/autores', methods=['GET'])
def get_users():
    drivers_json = []
    for user in user_dao.list_users():
        drivers_json.append(user.to_json())
    response = jsonify(drivers_json)
    response.headers.add('Access-Control-Allow-Origin', '*')
    return response

ثم أقوم بتسجيل رد axios الخاص بي وأحصل عليه:

{data: Array(4), status: 200, statusText: "OK", headers: {…}, config: {…}, …}

لا أعرف ما هي واجهة برمجة التطبيقات التي تستخدمها جميعًا ولكن تم حلها في Flask!

في حالتي لم يكن هناك خطأ في الأكسيوس. لقد طلبت للتو من الشخص الذي أنشأ واجهة برمجة التطبيقات (API) لتمكين CORS من جانب الخادم.

جرب هذا

delete axios.defaults.headers.common["X-Requested-With"];

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

لا أعتقد أنه يمكنك حل CORS مباشرة في axios ، لأن CORS عبارة عن تقييد للمتصفح يقع بين متصفحك والخوادم المستهدفة.

يمكنك إما:

1. قم بتضمين Access-Control-Allow-Origin في رؤوس استجابتك من الخادم الهدف .
2. لا تقم بتضمين اسم المضيف في طلب axios الخاص بك حتى يطلب الخادم الأصلي الخاص بك. ثم من الخادم الأصلي الخاص بك يمكنك القيام بكل ما تريد للخادم الهدف.

يرجى ذكر مثال مفصل لمقتطف الشفرة.
سوف يساعد.

كنت أواجه نفس المشكلة على بلدي المحلي.
لقد أضفت كور على الواجهة الخلفية وقمت بحلها. :)

ليست هذه هي المشكلة مع axios هذه هي المشكلة في الخلفية. أنا أستخدم Django. وستؤدي إضافة هذين إلى حل المشكلة.

أضف CORS Middlewear

MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]

والسماح لـ CORS.
(السماح لـ CORS للجميع)

CORS_ORIGIN_ALLOW_ALL = True

(هذا غير آمن إلى حد ما لأنه يسمح لجميع الأصول. مما يجعله قابلاً للقبول لهجمات CSRF)
ومن ثم فإن الإنتاج يسمح فقط لأصول محددة

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '<YOUR_DOMAIN>[:PORT]',
)

مثال: +1:

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8000',
)

تحية للجميع،
كما ذكرنا سابقًا ، هذه المشكلة هي حماية المتصفح ضد الطلبات عبر الأصل. لقد قمت بحلها باتباع الإرشادات التالية: https://support.google.com/chrome/thread/11089651؟hl=ar

لأولئك الذين ما زالوا يكافحون:
نأمل أن تكون قد فهمت الآن أن هذه ليست مشكلة مع Axios وأن المتصفح يحظر CORS بسبب عدم تعيين رأس الصفحة بواسطة الخادم. إذا فهمت هذا وما زلت تواجه مشكلة مع الخادم الخاص بك وعدم تعيين الرؤوس ، فتأكد من تعيينها على خادم الويب الفعلي عند استخدام وكيل عكسي. على سبيل المثال ، يتم تقديم العديد من تطبيقات Node / Express بواسطة NGINX في الإنتاج باستخدام وكيل عكسي. راجع enable-cors.org لمعرفة كيفية تعيينه في NGINX.

لأولئك الذين ما زالوا يكافحون:
نأمل أن تكون قد فهمت الآن أن هذه ليست مشكلة مع Axios وأن المتصفح يحظر CORS بسبب عدم تعيين رأس الصفحة بواسطة الخادم. إذا فهمت هذا وما زلت تواجه مشكلة مع الخادم الخاص بك وعدم تعيين الرؤوس ، فتأكد من تعيينها على خادم الويب الفعلي عند استخدام وكيل عكسي. على سبيل المثال ، يتم تقديم العديد من تطبيقات Node / Express بواسطة NGINX في الإنتاج باستخدام وكيل عكسي. راجع enable-cors.org لمعرفة كيفية تعيينه في NGINX.

لقد كنت أعاني لمدة 3 ساعات ، ولم يتغير شيء من جانب العميل ، وأخيراً أضفت العناصر التالية على الخادم:

تثبيت كور البيض (لمشروع البيض فقط)

// ./config/config.default.js

config.cors = {
    origin: ["http://localhost:8080"],
    allowedHeaders: [
      "Content-Type",
      "Authorization",
      "Access-Control-Allow-Methods",
      "Access-Control-Request-Headers"
    ],
    credentials: true,
    enablePreflight: true
  };

هذا كل شئ

const board = this.props.routeParams.tag;
axios.get('https://cors-anywhere.herokuapp.com/' + 'https://a.4cdn.org/' + board + '/threads.json', config)
.then(function (response) {
console.log(response.data);
});

ما عليك سوى استخدام fetch لاختبار ما إذا كانت كورسات الخادم تعمل أولاً.

و...

axios طلب koa-server ، ولكن ليس iris مباشرة ، فكلاهما يستخدم برامج وسيطة شهيرة.

1358

لقد نجح هذا معي وأحتاج إلى معرفة السبب

كنت أعمل مع Tornado و Vuejs ، لم تكن Axios هي المشكلة ، على الواجهة الخلفية الخاصة بي:

# Tornado
class ClassName(tornado.web.RequestHandler):
    def set_default_headers(self):
        self.set_header("Content-Type", "application/json")
        self.set_header("Access-Control-Allow-Origin", "*")
        self.set_header("Access-Control-Allow-Headers", "content-type")
        self.set_header(
            'Access-Control-Allow-Methods',
            'POST, GET, OPTIONS, PATCH, PUT'
        )

تضمين التغريدة
لقد عمل
شكرا Verrrrrrrrrrry

أواجه نفس المشكلة
رمز بلدي
أكسيوس ({
الطريقة: "get" ،
url: "http: // localhost: 4000 / المستخدمين"،
})
ثم (استجابة => {
console.log (استجابة) ؛
})
. صيد (خطأ => {
console.log (خطأ)
}) ؛
}
الحصول على هذا الخطأ
تم حظر الوصول إلى XMLHttpRequest على " http: // localhost : 4000 / users" من الأصل " http: // localhost : 3000" بواسطة سياسة CORS: الاستجابة لطلب الاختبار المبدئي لا يجتاز فحص التحكم في الوصول: لا "التحكم في الوصول -Allow-Origin 'رأس موجود في المورد المطلوب.

هل يمكن لأي شخص أن يعطيني حلًا خطوة بخطوة لما يجب أن أفعله؟

albertpinto بادئ ذي بدء ، يجب أن تفهم أن أكسيوس ليست هي المشكلة ، يجب أن تكون "الواجهة الخلفية" التي تستخدمها قادرة على استقبال البيانات الخارجية. لذلك في جوجل يمكنك البحث. شيء مثل _ تمكين cors (ضع اللغة أو إطار العمل الذي تستخدمه) _

albertpinto انظر إلى جميع الحلول الممكنة في هذا الموضوع الضخم. إنها ليست مشكلة من جانب العميل / الواجهة الأمامية من جانبك - إنها في الواقع الخادم (المضيف المحلي: 4000). يحتاج الخادم إلى الاستجابة برؤوس CORS للسماح بالأصل.

على سبيل المثال ، يجب أن يرد خادمك برؤوس مثل:

Access-Control-Allow-Origin:  *
Access-Control-Allow-Headers: Content-Type

لقد قمت بحل هذا من خلال ما يلي:

1. قم بتثبيت cors npm: npm install cors (على خادم بقية العقدة في حالتي http: // localhost: 4000)

هذا ينطبق أيضًا على نقطة النهاية الخاصة بك:
var cors = يتطلب ('cors')
فار صريح = يتطلب ('صريح')
var cors = يتطلب ('cors')
تطبيق var = express ()
app.use (cors ())

شكرا لجميع الاقتراحات!

// بالنسبة إلى CORS ، إذا كنت تستخدم حزمة js السريعة ، فيمكنك ببساطة استخدام حزمة cors عبر npm.

app.use(
    cors({
        credentials: true,
        origin: [
            'http://localhost:8080',
            'http://your-production-website.com'
        ]
    }),
)

لا يفرض cURL قواعد CORS. يتم فرض هذه القواعد من قبل المتصفحات لأغراض أمنية.

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

لمعلوماتك ، CORS - تقاسم الموارد عبر المنشأ. نظرًا لأن واجهة برمجة التطبيقات الخاصة بك لا تدعمها ، فلديك خياران -

1. استخدم خادم وكيل على نفس المجال مثل صفحة الويب الخاصة بك للوصول إلى 4chan's API أو ،
2. استخدم خادمًا وكيلاً في أي مجال آخر ، ولكن قم بتعديل الاستجابة لتضمين الرؤوس الضرورية.

أود التصويت لإغلاق هذا الموضوع باعتباره "ليس مشكلة".

تضمين التغريدة
نفس المنطق ، نفس الجسم ، لكن طلب نشر http الزاوي إلى نقطة نهاية الخلفية البعيدة لا يتلقى خطأ كتلة CORS

إذا كان لديك خادم Go قيد التشغيل ، فاقترح عليك استخدام Gorilla

headersOk := handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

err := http.ListenAndServe("localhost:8081", handlers.CORS(originsOk, headersOk, methodsOk)(r))

لقد قمت بحل هذا من خلال ما يلي:

1.إنشاء ملف vue.config.js في جذر المشروع بجوار package.json مباشرةً ، يحتوي على:

module.exports = {
    devServer:{
        proxy: {
            '/apiv1': {
                target: 'https://fuping.site/',
                changeOrigin: true,
                pathRewrite: {
                    '^/apiv1': ''
                }
            },
        },
    }
}

2- قم بعمل طلب http مثل هذا:

this.$axios({
          method:'get',
          url:'apiv1/about/',

        }).then(function(response){
          console.log(response.data)
        }).catch(error=>{
          console.log(error)
        })

axios.get ('https://a.4cdn.org/a/threads.json'، {
الرؤوس: {
"Access-Control-Allow-Origin": '*'،
"Access-Control-Allow-Headers": "Content-Type، Authorization"،
} ،
الوكيل: {
المضيف: '104.236.174.88'،
المنفذ: 3128
}
}). ثم (الوظيفة (الاستجابة) {
console.log ('response is:' + response.data) ؛
}). catch (function (error) {
إذا (error.response) {
console.log (error.response.headers) ؛
}
وإلا إذا (طلب الخطأ) {
console.log (error.request) ؛
}
آخر {
console.log (error.message) ؛
}
console.log (error.config) ،
}) ؛

مرحبا بالجميع،
أنا فقط أنشر هذا لأنه استغرق ساعات لحل هذه المشكلة.

بادئ ذي بدء ، تعد CORS بالتأكيد مشكلة من جانب الخادم وليست من جانب العميل ، لكنني كنت متأكدًا من صحة رمز الخادم في حالتي نظرًا لأن التطبيقات الأخرى كانت تعمل باستخدام نفس الخادم في مجالات مختلفة. بدأت المشكلة عندما بدأت في استخدام axios مع المثيل المخصص الخاص بي.

في حالتي ، كانت مشكلة محددة للغاية عندما استخدمنا baseURL في مثيل axios ثم حاول إجراء مكالمات GET أو POST من أي مكان ، يضيف axios شرطة مائلة / بين baseURL وعنوان URL للطلب. هذا منطقي أيضًا ، لكنها كانت المشكلة الخفية. كان خادم Laravel الخاص بي يعيد التوجيه لإزالة الشرطة المائلة اللاحقة التي تسبب هذه المشكلة.

بشكل عام ، لا يحب طلب ما قبل الرحلة OPTIONS إعادة التوجيه. لذا ، تأكد من التحقق من ذلك وتجنبه.

آمل أن يساعد هذا شخصًا ما على الرغم من عدم وجود خطأ في أي منه.