نحوه رفع خطای “بدون دسترسی” کنترل هدر “

احتمالاً قبلاً با این خطا روبرو شده اید. این آزار دهنده است ، اما بخشی از توسعه وب است. این مقاله تمام راه هایی را که می توانید خطای “بدون کنترل کنترل-آمار-من یا” را برطرف کنید ، پوشش می دهد.

خطای CORS

درک خطای “کنترل دسترسی-کنترل-منشور”

دو نوع خطای “کنترل دسترسی-ایل-منشور” وجود دارد:

1. هدر Cors 'دسترسی کنترل-کنترل-اورژین' گم شده است
2. هدر cors 'دسترسی کنترل-کنترل-اورژین' مطابقت ندارد با “xyz”

خطای اول هنگامی رخ می دهد که هدر موجود نباشد ، بنابراین مرورگر نمی تواند تأیید کند که آیا مبدا اجازه دارد درخواست متقاطع را ایجاد کند. خطای دوم هنگامی رخ می دهد که هدر موجود باشد ، اما مقدار برگشتی با مورد مورد انتظار متفاوت است.

اگر صاحب API هستید

اطمینان حاصل کنید که هدر CORS مناسب دارید

اگر صاحب API هستید ، ساده است. می توانید با افزودن هدر دسترسی-کنترل-آلم-منشور و مشخص کردن منشأ خود ، این مسئله را حل کنید. حتما از منشأ صحیح استفاده کنید.

به عنوان مثال ، در اکسپرس:

const express = require("express");
const cors = require("cors");
const app = express();

app.use(
  cors({
    origin: ["http://localhost:3000"], // Add allowed origins here
  })
);

مشخص کردن منشأ در پس زمینه مجاز است

بسته به فناوری باطن خود ، ممکن است بخواهید پیاده سازی های مختلفی را برای فعال کردن آن بررسی کنید. در اینجا یک منبع (اگرچه کمی قدیمی) به نام Enable-cors.org وجود دارد که برخی از راه های فعال کردن COR ها را در پس زمینه شما ذکر می کند.

اگر شما API را ندارید

درخواست را از طریق باطن خود هدایت کنید

اگر شما API را ندارید اما از پس زمینه خود برخوردار هستید ، می توانید یک نقطه پایانی اختصاصی را در پس زمینه خود ایجاد کنید تا به جای اینکه مستقیماً از جلوی آن استفاده کنید ، API هدف را واکشی کنید. سپس ، جلوی شما این نقطه پایانی جدید را صدا می کند. به این ترتیب ، درخواست واقعی از پس زمینه انجام می شود ، و از آنجا که CORS فقط در مورد جبهه اعمال می شود ، درخواست شما از بین می رود.

به عنوان مثال ، اگر یک باطن صریح دارید:

const app = express();

// use if backend and frontend in different origin
const cors = require("cors");
app.use(cors());

app.get("/data", (req, res) => {
  fetch("")
    .then((response) => response.json())
    .then((data) => res.json(data));
});

واکشی URL هدف در باطن

و در جبهه خود:

await fetch(`/data`);

کد Frontend Backend

از پروکسی CORS استفاده کنید

اگر شما API را ندارید و پس زمینه ندارید ، می توانید از پروکسی CORS استفاده کنید. یک پروکسی CORS با واکشی منبع از طرف شما و بازگشت داده ها با عنوان CORS مناسب کار می کند. ما قبلاً در مقاله خود در مورد پروکسی CORS پوشش داده بودیم.

به عنوان مثال ، در اینجا نحوه انجام آن با CorsFix آورده شده است:

fetch("https://proxy.corsfix.com/?");

با استفاده از پروکسی CORS واکشی کنید

پایان

ما گزینه هایی را پوشش داده ایم که می توانید برای حل خطای هدر “عدم کنترل-کنترل-آمیز-یا” بسته به وضعیت شما استفاده کنید. شما می توانید در پس زمینه خود تغییراتی ایجاد کنید یا از پروکسی CORS استفاده کنید. همچنین برخی از اشتباهات رایج که توسعه دهندگان هنگام برخورد با COR ها مرتکب می شوند ، که می توانید در مقاله “اشتباهات CORS مشترک” ما پیدا کنید.

اگر به دنبال پروکسی CORS آماده تولید ، سریع و نامحدود هستید ، CorsFix را بررسی کنید. می توانید با CorsFix به صورت رایگان شروع به توسعه کنید و وقتی برای تولید آماده هستید ، می توانید هر یک از برنامه هایی را که متناسب با نیازهای شما باشد ، انتخاب کنید.