<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
	<channel>
		<title>حسوب I/O - النقاش على كيف اضع bearer token في Authorization في js fetch api</title>
		<description>أحدث التعليقات على كيف اضع bearer token في Authorization في js fetch api - حسوب I/O</description>
		<language>ar</language>
		<generator>حسوب I/O</generator>
		<item>
			<title>ما تحتاجه هو SPA Authentication أي مصادقة تطبيقات الويب أحادية الصفحة، لأنها الأنسب للمواقع التي تعمل على نفس النطاق domain، ...</title>
			<pubDate>Tue, 21 Apr 2026 09:20:16 +0000</pubDate>
			<link>https://io.hsoub.com/%D8%AA%D8%B7%D9%88%D9%8A%D8%B1%20%D8%A7%D9%84%D9%88%D9%8A%D8%A8/181988-%D9%83%D9%8A%D9%81-%D8%A7%D8%B6%D8%B9-bearer-token-%D9%81%D9%8A-authorization-%D9%81%D9%8A-js-fetch-api#comment-1011818</link>
			<description><![CDATA[ما تحتاجه هو SPA Authentication أي مصادقة تطبيقات الويب أحادية الصفحة، لأنها الأنسب للمواقع التي تعمل على نفس النطاق domain، أي ستسخدم الكوكيز والجلسات. والخطأ لديك بسبب إرسال الطلب بدون كوكيز الجلسة، فالمتصفح بطبيعته لا يرسل الكوكيز مع طلبات fetch أو axios إلا إن أخبرته بذلك صراحةً، لذلك، لارافل لا يعرف من أنت، فيعتبرك زائراً غير مسجل الدخول. أي تضمين التالي: credentials: &quot;include&quot; ليصبح الكود في قسم &amp;lt;head&amp;gt; في ملف الـ Blade كالتالي: async function checkName(bodyForm) { &amp;nbsp; &amp;nbsp; try { &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; const csrfToken = document.querySelector(&#39;meta[name=&quot;csrf-token&quot;]&#39;).getAttribute(&#39;content&#39;); &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; const response = await fetch(&quot;/api/addCompany&quot;, { &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; method: &quot;POST&quot;, &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; credentials: &quot;include&quot;, &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; headers: { &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &#39;Accept&#39;: &#39;application/json&#39;, &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &#39;Content-Type&#39;: &#39;application/json&#39;, &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &#39;X-CSRF-Token&#39;: csrfToken, &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; }, &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; body: bodyForm &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; }); &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; const namesJson = await response.json(); &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; console.log(namesJson); &amp;nbsp; &amp;nbsp; } catch(error) { &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; console.log(error.message); &amp;nbsp; &amp;nbsp; } } وفي ملف .env: SESSION_DOMAIN=localhost SANCTUM_STATEFUL_DOMAINS=localhost:8000 # أو الدومين الذي تعمل عليه SESSION_DRIVER=cookie وفي ملف ملف config/cors.php: &#39;paths&#39; =&amp;gt; [&#39;api/*&#39;, &#39;sanctum/csrf-cookie&#39;, &#39;login&#39;, &#39;logout&#39;], &#39;allowed_methods&#39; =&amp;gt; [&#39;*&#39;], &#39;allowed_origins&#39; =&amp;gt; [&#39;http://localhost:8000&#39;], // ضع الدومين الخاص بك هنا (بدون slash في النهاية) &#39;allowed_headers&#39; =&amp;gt; [&#39;*&#39;], &#39;exposed_headers&#39; =&amp;gt; [], &#39;max_age&#39; =&amp;gt; 0, &#39;supports_credentials&#39; =&amp;gt; true, وقبل أن تقوم بعمل POST لأي مسار محمي مثل addCompany، يجب أن تطلب كوكيز الـ CSRF من Sanctum لتخزينه في المتصفح. وبالنسبة لمكان حفظ التوكن، فلارافل يقوم بإنشاء كوكي مشفر يسمى laravel_session ويخزنه في متصفح المستخدم كـ HttpOnly Cookie لا يمكن الوصول إليه عبر الجافاسكريبت للحماية من هجمات XSS. أما&amp;nbsp;Bearer Token فلا تحفظه أبداً في localStorage لأنه عرضة للاختراق بسهولة عبر هجمات XSS، قم بإعادة الـ Token من الـ API وجعل الـ Frontend يخزنه في HttpOnly Cookie، أو استخدام آلية لارافل لـ API Tokens.]]></description>
		</item><item>
			<title>موقعي هو token الخاص بالمستخدم عشان يستخدم sanctum ليس معروف للمستخدم. لانه متجر الكتروني و ليس فقط api</title>
			<pubDate>Mon, 20 Apr 2026 12:52:53 +0000</pubDate>
			<link>https://io.hsoub.com/%D8%AA%D8%B7%D9%88%D9%8A%D8%B1%20%D8%A7%D9%84%D9%88%D9%8A%D8%A8/181988-%D9%83%D9%8A%D9%81-%D8%A7%D8%B6%D8%B9-bearer-token-%D9%81%D9%8A-authorization-%D9%81%D9%8A-js-fetch-api#comment-1011648</link>
			<description><![CDATA[موقعي هو token الخاص بالمستخدم عشان يستخدم sanctum ليس معروف للمستخدم. لانه متجر الكتروني و ليس فقط api]]></description>
		</item><item>
			<title>للاسف كله هذا سويته ولا زال يظهر لي unauthenticated . كود جافاسكريبت async function checkName(bodyForm){ &amp;nbsp; &amp;nbsp; try{ &amp;...</title>
			<pubDate>Mon, 20 Apr 2026 12:50:17 +0000</pubDate>
			<link>https://io.hsoub.com/%D8%AA%D8%B7%D9%88%D9%8A%D8%B1%20%D8%A7%D9%84%D9%88%D9%8A%D8%A8/181988-%D9%83%D9%8A%D9%81-%D8%A7%D8%B6%D8%B9-bearer-token-%D9%81%D9%8A-authorization-%D9%81%D9%8A-js-fetch-api#comment-1011646</link>
			<description><![CDATA[للاسف كله هذا سويته ولا زال يظهر لي unauthenticated . كود جافاسكريبت async function checkName(bodyForm){ &amp;nbsp; &amp;nbsp; try{ &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; const name=await fetch(&quot;api/addCompany&quot;,{ &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; method:&quot;POST&quot;, &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; // credentials:&quot;include&quot;, &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; headers: { &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &#39;Accept&#39;: &#39;application/json&#39;, &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &#39;Content-Type&#39;: &#39;application/json&#39;, &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &quot;Authorization&quot;: `Bearer ${document.querySelector(&#39;input[name=_token]&#39;).value}`,// crsf tokenهذا &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &quot;X-CSRF-Token&quot;: document.querySelector(&#39;input[name=_token]&#39;).value &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; }, &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; body:bodyForm &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; }); &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; const namesJson=await name.json(); &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; console.log(namesJson) &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; // const retName=await namesJson.recName; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; // console.log(retName); &amp;nbsp; &amp;nbsp; } &amp;nbsp; &amp;nbsp; catch(error) &amp;nbsp; &amp;nbsp; { &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; return console.log(error.message); &amp;nbsp; &amp;nbsp; } }  المشكلة هي ان token لابد يكون موجود في bearer token في header. و مشكلتي هي هل الافضل حفظ token في session من ناحية امنية؟]]></description>
		</item><item>
			<title>ربما لم تقم بالإعدادات بالشكل المناسب . ولذلك يمكنك الإطلاع على التعليق التالي والتأكد من الخطوات https://academy.hsoub.com/q...</title>
			<pubDate>Mon, 20 Apr 2026 11:50:18 +0000</pubDate>
			<link>https://io.hsoub.com/%D8%AA%D8%B7%D9%88%D9%8A%D8%B1%20%D8%A7%D9%84%D9%88%D9%8A%D8%A8/181988-%D9%83%D9%8A%D9%81-%D8%A7%D8%B6%D8%B9-bearer-token-%D9%81%D9%8A-authorization-%D9%81%D9%8A-js-fetch-api#comment-1011639</link>
			<description><![CDATA[ربما لم تقم بالإعدادات بالشكل المناسب . ولذلك يمكنك الإطلاع على التعليق التالي والتأكد من الخطوات https://academy.hsoub.com/questions/27246-%D9%85%D8%A8%D8%AA%D8%AF%D9%8A-%D9%81%D9%8A-%D8%AA%D8%B9%D9%84%D9%85-%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D9%87-%D9%84%D8%A7%D8%B1%D8%A7%D9%81%D9%84-%D9%83%D9%8A%D9%81-%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D9%86%D8%B8%D8%A7%D9%85-%D8%A7%D9%84%D9%85%D8%B5%D8%A7%D8%AF%D9%82%D9%87/ وتأكد أيضاً من عدم غياب HasApiTokens من نموذج المستخدم. أو نسيان إضافة Accept: application/json في الترويسات، مما يجعل Laravel يرجع استجابة HTML بدلًا من JSON.]]></description>
		</item><item>
			<title>كيف استخدم Sanctum فيه حاولت و كل مره يظهر لي unauthenticated</title>
			<pubDate>Mon, 20 Apr 2026 11:27:02 +0000</pubDate>
			<link>https://io.hsoub.com/%D8%AA%D8%B7%D9%88%D9%8A%D8%B1%20%D8%A7%D9%84%D9%88%D9%8A%D8%A8/181988-%D9%83%D9%8A%D9%81-%D8%A7%D8%B6%D8%B9-bearer-token-%D9%81%D9%8A-authorization-%D9%81%D9%8A-js-fetch-api#comment-1011638</link>
			<description><![CDATA[كيف استخدم Sanctum فيه حاولت و كل مره يظهر لي unauthenticated]]></description>
		</item><item>
			<title>المتصفح لا يقوم تلقائياً بإرسال الـ Bearer Token مع طلبات fetch كما يفعل مع الـ Cookies. ولذلك ستحتاج إلى تخزين الـ Token الذ...</title>
			<pubDate>Mon, 20 Apr 2026 11:14:00 +0000</pubDate>
			<link>https://io.hsoub.com/%D8%AA%D8%B7%D9%88%D9%8A%D8%B1%20%D8%A7%D9%84%D9%88%D9%8A%D8%A8/181988-%D9%83%D9%8A%D9%81-%D8%A7%D8%B6%D8%B9-bearer-token-%D9%81%D9%8A-authorization-%D9%81%D9%8A-js-fetch-api#comment-1011636</link>
			<description><![CDATA[المتصفح لا يقوم تلقائياً بإرسال الـ Bearer Token مع طلبات fetch كما يفعل مع الـ Cookies. ولذلك ستحتاج إلى تخزين الـ Token الذي يرجعه الخادم عند تسجيل الدخول وإرساله في كل طلب fetch مثال على ذلك const token = localStorage.getItem(&#39;auth_token&#39;); fetch(&#39;https://your-api.com/api/user-data&#39;, { &amp;nbsp; &amp;nbsp; method: &#39;GET&#39;, &amp;nbsp; &amp;nbsp; headers: { &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &#39;Authorization&#39;: `Bearer ${token}`, &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &#39;Accept&#39;: &#39;application/json&#39;, // مهم جداً حتى يرجع Laravel خطأ 401 بدلاً من التحويل لصفحة Login &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &#39;Content-Type&#39;: &#39;application/json&#39; &amp;nbsp; &amp;nbsp; } }) .then(response =&amp;gt; response.json()) .then(data =&amp;gt; console.log(data)) .catch(error =&amp;gt; console.error(&#39;Error:&#39;, error)); ولكن أنت لست بحاجة إلى التعامل مع الـ Bearer Token . حيث يوفر Sanctum ميزة SPA (Single Page Application) Authentication، والتي تعتمد على ملفات تعريف الارتباط (Cookies) المشفرة الخاصة بـ Laravel، وهي أكثر أماناً (لأنها محمية من ثغرات XSS التي يمكنها سرقة الـ localStorage).]]></description>
		</item>
	</channel>
</rss>
