Dva: جلب المشكلات عبر النطاقات

تم إنشاؤها على ١٧ نوفمبر ٢٠١٦  ·  18تعليقات  ·  مصدر: dvajs/dva

استدعاء طريقة طبقة الخدمة في تأثيرات طبقة النموذج ، يكون الرمز كما يلي:

// 引入service
import { login } from '../services/authentication';
// effects
*login({ payload: { currentUser } }, { select, call, put }) {
      const data = yield call(login, {
        "mobile": currentUser.userName,
        "password": currentUser.password
      });
      console.log('my response data is:', data);

طلب خادم عرض المتصفح أمر طبيعي ، لكن طباعة البيانات تُظهر الخطأ الناتج عن حالة الاختيار ، والاستجابة التي تم إرجاعها قبل حالة الاختيار هي:

body:(...)
bodyUsed:false
headers:Headers
    __proto__: Headers
ok:false
status:0
statusText:""
type:"opaque"
url:""

عفوا ، ما هي المشكلة؟ طلب عرض المتصفح يُرجع الحالة 200 ، لكن رمز حالة http الذي تم الحصول عليه هنا هو 0. هل هي التأثيرات الخاصة بي أم الجلب؟

277 بالمناسبة ، لا تزال مشكلة إضافة الرؤوس قائمة ، إنها أيضًا نسخة dva6.0 ، هل يمكن أن تكون مشكلة الجلب المتماثل؟

faq question

التعليق الأكثر فائدة

  1. الخطأ الناتج عن الجلب لم يحدد مكان المشكلة بوضوح ، وتغير إلى حل الوعد (axios) لمعرفة أنها مشكلة عبر المجالات
    2. لقد وجدت منشورًا على الإنترنت لحل المشكلة عبر النطاقات بسهولة ، وضبط الوضع: no-cors ، وأخذت بعض الطرق الالتفافية.
    3. أخيرًا ، لدي فهم أعمق لعملية الجلب من خلال قراءة المستندات الرسمية للجلب ، وأخيرًا قمت بحل المشكلة عن طريق تحديد الوضع ؛ cors.
    الملخص: يكمن مفتاح حل المشكلات عبر المجال في فهم بروتوكولات xhr و http. والفرق الأكبر بين تحديد الوضع كـ Cors و no-cors هو أن cors تمر عبر الخيارات قبل إرسال منطقة الطلب.

ال 18 كومينتر

إنها ليست مشكلة تأثير ، يجب أن تكون مرتبطة بالجلب. عبر النطاق؟

لقد قدمت طلبًا عبر المجال ، وقمت بتغييره إلى axios لتقديم الطلب. كل شيء طبيعي. ما هي المعلمات التي يجب تهيئتها للجلب لدعم النطاق المتقاطع؟

لم أجربها على وجه التحديد ، ولكن بالنظر إلى وثائق الجلب ، يُقال إن المعالجة عبر النطاقات متوافقة مع طلب XMLHTTP. هل يمكن أن يكون مرتبطًا بحقيقة أنه لم يتم إحضار ملف تعريف الارتباط؟ https://www.npmjs.com/package/whatwg-fetch#sending -cookies

في مشروعي ، تتم كتابة الخادم بلغة GO ، وطالما تم تكوين الخادم لدعم / السماح بالمجالات المتقاطعة ، فإن جلب العميل لا يتطلب تكوينًا إضافيًا ؛

أعتقد أن فقم بحل مشكلة المصادقة :)

في الساعة 8:30 صباحًا يوم 18 نوفمبر 2016 ، كتب chencheng (云 谦) [email protected] :

لم أجربها على وجه التحديد ، ولكن بالنظر إلى وثائق الجلب ، يُقال إن المعالجة عبر النطاقات متوافقة مع طلب XMLHTTP. هل يمكن أن يكون مرتبطًا بحقيقة أنه لم يتم إحضار ملف تعريف الارتباط؟ https://www.npmjs.com/package/whatwg-fetch#sending -cookies https://www.npmjs.com/package/whatwg-fetch#sending -cookies
-
أنت تتلقى هذا لأنك مشترك في هذا الموضوع.
قم بالرد على هذه الرسالة الإلكترونية مباشرة ، أو قم بعرضها على GitHub https://github.com/dvajs/dva/issues/282#issuecomment -261413729 ، أو قم بكتم صوت الموضوع https://github.com/notifications/unsubscribe-auth/ACv7UniRkGq0Uv8XFBUeNMe5jksbeGyWp. 4

شكرًا لك ، تم حل المشكلة ، إنها مشكلة الوضع وإعداد بيانات الاعتماد.

كيف نحلها ، دعنا نتحدث عن الخطة ، قد يواجهها الآخرون لاحقًا.

  1. الخطأ الناتج عن الجلب لم يحدد مكان المشكلة بوضوح ، وتغير إلى حل الوعد (axios) لمعرفة أنها مشكلة عبر المجالات
    2. لقد وجدت منشورًا على الإنترنت لحل المشكلة عبر النطاقات بسهولة ، وضبط الوضع: no-cors ، وأخذت بعض الطرق الالتفافية.
    3. أخيرًا ، لدي فهم أعمق لعملية الجلب من خلال قراءة المستندات الرسمية للجلب ، وأخيرًا قمت بحل المشكلة عن طريق تحديد الوضع ؛ cors.
    الملخص: يكمن مفتاح حل المشكلات عبر المجال في فهم بروتوكولات xhr و http. والفرق الأكبر بين تحديد الوضع كـ Cors و no-cors هو أن cors تمر عبر الخيارات قبل إرسال منطقة الطلب.

sorrycc teacher ، لقد واجهت أيضًا بعض المشكلات في الجلب عبر النطاقات. بعد استخدام طلب الجلب ، ظهر طلب 200 خيار في وحدة التحكم. يمكن أن تدخل الخلفية نقطة التوقف. طريقة الحكم هي GET (طلبي الحقيقي) ، و تستخدم الواجهة الأمامية response.json () يمكن أيضًا الحصول على بيانات الخلفية ، ولكن لا تحتوي وحدة التحكم على سجل لطلبات GET ، فقط خيارات. إذا كنت تستخدم ajax ، فكل شيء طبيعي. تحتوي وحدة التحكم على كل من طلبات Option و GET.

AsceticBoy يبدو أنه يجب أن يكون هناك مشكلة في وحدة التحكم. هل هي مجهزة

xaviertung الواجهة الأمامية عبر المواقع تحتاج فقط إلى ضبط الوضع ؛ cors؟
أضفت بيانات الاعتماد: "تضمين" في الرأس ، وسأبلغ عن خطأ يفيد بأن الطلب غير مسموح به.
تصحيح الأخطاء أمر مزعج الآن ، ولا بد لي من تغيير مجال التكلفة في كل مرة ثم تجميع الواجهة الأمامية ووضعها في مشروع النهاية الخلفية لتصحيح الأخطاء.
كيف أحتاج إلى إعداد nginx + tomcat (الربيع) الخلفية التي أستخدمها؟شكرا لك

يحتاج wuyongdec إلى التحقق مما إذا كان الخادم مفتوحًا للسماح بالتكوين عبر المجال.

يدعم wuyongdec dora تصحيح الأخطاء عبر المجال

xaviertung تم فتح الخادم ، لكن الخادم رفض عند إضافة بيانات الاعتماد: تم إضافة "include".

jingchenxu هل هناك أي وثائق؟

واجهت هذه المشكلة لأن الوكيل لم يتم تكوينه في .roadhogrc. الموجه هو أيضا قضية عبر المجال.

قم بتغيير http://jsonplaceholder.typicode.com/ الهدف إلى عنوان الخادم الخاص بك
"proxy": { "/api": { "target": "http://jsonplaceholder.typicode.com/", "changeOrigin": true, "pathRewrite": { "^/api" : "" } } }

wuyongdec لقد واجهت أيضًا نفس المشكلة التي تواجهها ، هل قمت بحلها؟ كيف تم حلها؟

نهايات أمامية وخلفية منفصلة للتكوين عبر المجال! ! ! مصادقة بدون ملفات تعريف الارتباط ، تكوين مصادقة JWT! !
حل مشكلة عدم القدرة على الطلبات عبر النطاقات ،
أولاً ، لا تقم بتعيين proxy في config.js. يمكن استخدام هذا التكوين للتطوير المحلي فقط وسيكون غير صالح بعد البناء.

خطتي:
تكوين في env. (أنشئ في الدليل الجذر إذا لم يكن كذلك)
عند طلب واجهة برمجة التطبيقات ، اقرأ عنوان الخادم. (تعديل request.js)

nghin / apache / php server plus
add_header Access-Control-Allow-Origin * دائمًا ؛ ### (منذ Nginx 1.7.5)

add_header طرق الوصول ، التحكم ، السماح ، GET ، POST ، OPTIONS ، HEAD ، PUT ؛
add_header Access-Control-Allow-Headers "إذن ، نوع المحتوى" ؛

الجبهة الأمامية fentch:
بيانات الاعتماد: "حذف" // وهذا يعني أنه لا يجب إرسال ملفات تعريف الارتباط ، وأن الطلبات عبر المجالات مطلوبة
العنوان: {
التفويض: localStorage.getItem ("رمز تسجيل الدخول") ،
}

من بينها ، يشير "التفويض" إلى التكوينات المختلفة للخوادم المختلفة ، اعتمادًا على طريقة المصادقة من جانب الخادم

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

{
  mode: 'cors',
  credentials: 'include',
}

يكتب خادم nginx العنوان التالي

add_header Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Keep-Alive,User-Agent,Cache-Control,Content-Type,Authorization,sbid
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: 你的域名

في هذا الوقت ، يمكنك حذف المنشور وما إلى ذلك ، حيث يمكن أن تعمل جميعها بشكل طبيعي ،
ومع ذلك ، عند مواجهة مشكلة أخرى ، فقد nginx Access-Control-Allow-Origin وغيرها من المعلومات عند إرجاع 401 ، مما أدى إلى فشل الحصول على حالة الاستجابة على 401 (https://github.com/github/fetch/issues/201 # issuecomment-141777867)
الحل ، يضيف nginx دائمًا
بناء الجملة: | add_header name value [always]؛
http ، الخادم ، الموقع ، إذا كان في الموقع

server {
  listen       80;
  server_name  www.google.com;

  #charset koi8-r;
  #access_log  /var/log/nginx/host.access.log  main;

  location / {
    if ($request_method = 'OPTIONS') { 
      add_header Access-Control-Allow-Origin 'http://www.baidu.com' always;
      add_header Access-Control-Allow-Credentials 'true' always; 
      add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' always;
      add_header Access-Control-Allow-Headers 'Keep-Alive,User-Agent,Cache-Control,Content-Type,Authorization,sbid' always;    
      return 200; 
    }

    root   /home/wwwroot/php;
    index  index.php index.html index.htm;
    try_files $uri $uri/ /index.php?$args;
  }

  location ~ \.php$ {
    add_header Access-Control-Allow-Origin 'http://www.baidu.com' always;
    add_header Access-Control-Allow-Credentials 'true' always; 
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' always;
    add_header Access-Control-Allow-Headers 'Keep-Alive,User-Agent,Cache-Control,Content-Type,Authorization,sbid' always;  
    root /home/wwwroot/php/;
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME           $document_root$fastcgi_script_name;
    include fastcgi_params;
  }  
}

server {
  listen       80;
  server_name  www.baidu.com;

  #charset koi8-r;
  #access_log  /var/log/nginx/host.access.log  main;

  location / {
    root   /home/wwwroot/view;
    try_files $uri $uri/ /index.html;
  }  
}
هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات