مشکل با کار با axios

این لینک رو بخونین
https://roocket.ir/articles/what-is-cors

خوندیم ولی جواب نگرفتیم.

درود و عید شما هم مبارک مهندس! 🎉

مشکل CORS که داری

ارور:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://4.62.15.143:8004/api/service/getTypeService. (Reason: CORS request did not succeed).

این یعنی مرورگر جلوی درخواست Ajax به اون آدرس رو گرفته چون:

• دامنه یا پورت درخواست و دامنه‌ای که صفحه از اون لود شده فرق داره (Cross-Origin)
• سرور مقصد هدرهای لازم برای اجازه دادن به درخواست از این مبدا رو ارسال نکرده.

راه‌حل‌ها:

1. تنظیم CORS در سرور

   سرور باید هدر Access-Control-Allow-Origin رو به درخواست‌ها اضافه کنه و اجازه بده که این مبدا (یا همه مبداها) درخواست بزنن. برای مثال:

   Access-Control-Allow-Origin: *

   یا

   Access-Control-Allow-Origin: http://your-frontend-domain.com

   همچنین ممکنه هدرهای دیگه مثل:

   Access-Control-Allow-Methods: POST, GET, OPTIONS
   Access-Control-Allow-Headers: Content-Type, Authorization

   نیاز باشه.

2. پروکسی کردن درخواست‌ها

   اگر دسترسی به سرور نداری یا نمی‌خوای سرور رو تغییر بدی، می‌تونی درخواست‌ها رو از طریق یک سرور واسط (پروکسی) بفرستی که همون دامنه باشه.

3. در مرحله توسعه (dev) می‌تونی از تنظیمات webpack-dev-server یا ابزارهای مشابه برای پروکسی استفاده کنی

در مورد خط کد:

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

• این هدر به سرور می‌گه که درخواست از طریق Ajax (XMLHttpRequest) ارسال شده.
• معمولا برای تشخیص درخواست Ajax در سرور استفاده میشه.
• این هدر ربطی به CORS نداره و قرار دادن یا نزدن آن تاثیری روی مشکل CORS نداره.
• اگر سرورت این هدر رو چک می‌کنه برای تشخیص نوع درخواست، می‌تونی بذاری. اما اگر نه، لازم نیست حتما.

خلاصه:

• مشکل اصلی CORS هست و باید سرور برای درخواست‌های cross-origin اجازه بده.
• اون خط کد فقط هدر می‌ذاره، ربطی به CORS نداره و ضروری نیست مگر سرور بخواد.