آنچه که در این مقاله خواهید خواند:
سوال
ظاهراً معنای آن را کاملاً اشتباه متوجه شده ام. من به چیزی شبیه این فکر کردم:
- یک سرویس گیرنده کد جاوا اسکریپت MyCode.js را از http://siteA )مبدا( دانلود می کند.
- هدر پاسخ MyCode.js حاوی Access-Control-Allow-Origin:http://siteB است، که به نظر من به این معنی می باشد که MyCode.js مجاز است به سایت B ارجاعات متقاطع بدهد.
- کلاینت برخی از عملکردهای MyCode.js را فعال می کند، که به نوبه خود درخواست هایی را به http://siteB می دهد.
خب من اشتباه میکنم. اصلا اینجوری کار نمیکنه. بنابراین، من اشتراک گذاری منابع متقاطع را خوانده ام و سعی کردم اشتراک گذاری منابع W3C متقاطع را در توصیه را بخوانم .
یک چیز مطمئن است – من هنوز نمی دانم که چگونه باید از این هدر استفاده کنم.
من کنترل کامل هر دو سایت A و سایت B را دارم. چگونه می توانم کد جاوا اسکریپت دانلود شده از سایت A را برای دسترسی به منابع سایت B با استفاده از این هدر فعال کنم؟
پی نوشت: من نمی خواهم از JSONP استفاده کنم.
پاسخ
Origin یک هدر CORS (اشتراک گذاری منابع متقابل) است.
هنگامی که سایت A سعی می کند محتوا را از سایت B بگیرد، سایت B می تواند یک هدر پاسخ Access-Control-Allow-Origin ارسال کند تا به مرورگر بگوید که محتوای این صفحه برای منابع خاصی قابل دسترسی است. ( منبع یک دامنه است، به اضافه یک طرح و شماره پورت.) به طور پیش فرض، صفحات سایت B برای هیچ منبع دیگری قابل دسترسی نیستند . با استفاده از هدر Access-Control-Allow-Origin دری را برای دسترسی متقاطع از مبدا های درخواستی خاص باز می کند.
برای هر منبع/صفحه ای که سایت B می خواهد برای سایت A قابل دسترسی باشد، سایت B باید صفحات خود را با هدر پاسخ ارائه کند:
Access-Control-Allow-Origin: http://siteA.comمرورگر های مدرن به طور کامل درخواست های متقابل دامنه را مسدود نمی کنند. اگر سایت A صفحه ای را از سایت B درخواست کند، مرورگر در واقع صفحه درخواستی را در سطح شبکه دریافت و بررسی می کند که آیا هدر های پاسخ، سایت A را به عنوان دامنه درخواست کننده مجاز فهرست می کنند یا خیر. اگر سایت B نشان نداده باشد که سایت A اجازه دسترسی به این صفحه را دارد، مرورگر رویداد XMLHttpRequest را برای error فعال می کند و داده های پاسخ به کد جاوا اسکریپت درخواستی را رد می کند.
درخواست های غیر ساده
آنچه در سطح شبکه اتفاق می افتد می تواند کمی پیچیده تر از آنچه در بالا توضیح داده شد باشد. اگر درخواست یک درخواست “غیر ساده” باشد، مرورگر ابتدا یک درخواست OPTIONS “پیش از پرواز” بدون داده ارسال می کند تا تأیید کند که سرور درخواست را می پذیرد. یک درخواست زمانی ساده نیست که یکی (یا هر دو):
- استفاده از یک فعل HTTP غیر از GET یا POST (مثلا PUT یا DELETE)
- استفاده از هدر های غیر ساده درخواست؛ تنها هدر های درخواست ساده عبارتند از:
- Accept
- Accept-Language
- Content-Language
- Content-Type (این فقط زمانی ساده است که مقدار آنapplication/x-www-form-urlencoded , multipart/form-data یا text/plain باشد)
اگر سرور به پیش پرواز OPTIONS با هدر های پاسخ مناسب ( Access-Control-Allow-Headers برای هدر های غیر ساده، Access-Control-Allow-Methods برای افعال غیر ساده) که با فعل غیر ساده و/یا هدر های غیر ساده مطابقت دارد، پاسخ دهد، مرورگر درخواست واقعی را ارسال می کند.
با فرض اینکه سایت A بخواهد یک درخواست PUT برای /somePage ارسال کند، با مقدار غیر ساده Content-Type ارزش application/json، مرورگر ابتدا یک درخواست پیش از پرواز ارسال می کند:
OPTIONS /somePage HTTP/1.1
Origin: http://siteA.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type
توجه داشته باشید که Access-Control-Request-Method و Access-Control-Request-Headers توسط مرورگر به طور خودکار اضافه می شوند. شما نیازی به اضافه کردن آنها ندارید. این پیش پرواز OPTIONS هدر های پاسخ موفق را دریافت می کند:
Access-Control-Allow-Origin: http://siteA.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type
هنگام ارسال درخواست واقعی (پس از انجام پیش از پرواز)، رفتار با نحوه رسیدگی به یک درخواست ساده یکسان است. به عبارت دیگر، یک درخواست غیر ساده که پیش از پرواز موفقیت آمیز باشد، مانند یک درخواست ساده تلقی می شود (یعنی سرور همچنان باید Access-Control-Allow-Origin برای پاسخ واقعی دوباره ارسال کند).
مرورگر ها درخواست واقعی را ارسال می کنند:
PUT /somePage HTTP/1.1
Origin: http://siteA.com
Content-Type: application/json
{ "myRequestContent": "JSON is so great" }
و سرور یک Access-Control-Allow-Origin را باز می فرستد، درست مانند یک درخواست ساده:
Access-Control-Allow-Origin: http://siteA.comبرای یادگیری زبان برنامه نویسی محبوب جاوا اسکریپت می توانید از مسیر کارآموزی فرانت اند استفاده کنید.
پاسخ‌ها