নীচের তদন্তে API হিসাবে, আমি আপনার প্রশ্ন থেকে http: // myApiUrl / login এর পরিবর্তে http://example.com ব্যবহার করি , কারণ এই প্রথমটি কাজ করছে।
আমি ধরে নিচ্ছি যে আপনার পৃষ্ঠাটি http: //my-site.local: 8088 এ রয়েছে ।
আপনি বিভিন্ন ফলাফল দেখার কারণটি হ'ল পোস্টম্যান:
- হেডার সেট করুন
Host=example.com
(আপনার এপিআই)
- শিরোনাম সেট করা নেই
Origin
এটি ব্রাউজারগুলির অনুরোধগুলি প্রেরণের পদ্ধতির অনুরূপ যখন সাইট এবং এপিআই-তে একই ডোমেন থাকে (ব্রাউজারগুলি শিরোনাম আইটেমটি সেট করে Referer=http://my-site.local:8088
, তবে আমি এটি পোস্টম্যানে দেখি না)। যখন Origin
শিরোনাম সেট করা থাকে না , সাধারণত সার্ভারগুলি ডিফল্টরূপে অনুরোধগুলি মঞ্জুরি দেয়।
পোস্টম্যান অনুরোধগুলি কীভাবে প্রেরণ করে এটি এটি way যখন আপনার সাইট এবং এপিআই-এর আলাদা আলাদা ডোমেন থাকে তখন কোনও ব্রাউজার আলাদা আলাদাভাবে অনুরোধ পাঠায় এবং তারপরে সিওআরএস ঘটে এবং ব্রাউজারটি স্বয়ংক্রিয়ভাবে:
- শিরোনাম সেট করে
Host=example.com
(এপিআই হিসাবে আপনার)
- শিরোনাম সেট করে
Origin=http://my-site.local:8088
(আপনার সাইট)
(শিরোনামটির Referer
সমান মান রয়েছে Origin
)। এবং এখন Chrome এর কনসোল ও নেটওয়ার্ক ট্যাবে আপনি দেখতে পাবেন:
যখন আপনার কাছে Host != Origin
এটি থাকে CORS, এবং যখন সার্ভারটি এই জাতীয় অনুরোধ সনাক্ত করে, এটি সাধারণত এটি ডিফল্টরূপে অবরুদ্ধ করে ।
Origin=null
আপনি কোনও স্থানীয় ডিরেক্টরি থেকে HTML সামগ্রী খুললে সেট করা থাকে এবং এটি একটি অনুরোধ প্রেরণ করে। একই অবস্থাটি যখন আপনি <iframe>
নীচের স্নিপেটের মতো একটি এর ভিতরে একটি অনুরোধ প্রেরণ করেন (তবে এখানে শিরোনামটি Host
মোটেই সেট করা হয় না) - সাধারণভাবে, যেখানেই এইচটিএমএল স্পেসিফিকেশন অস্বচ্ছ উত্স বলে, আপনি এটি অনুবাদ করতে পারেন Origin=null
। এই সম্পর্কে আরও তথ্য আপনি এখানে জানতে পারেন ।
fetch('http://example.com/api', {method: 'POST'});
Look on chrome-console > network tab
আপনি যদি কোনও সাধারণ সিওআরএস অনুরোধ ব্যবহার না করেন তবে সাধারণত প্রধান অনুরোধটি প্রেরণের আগে ব্রাউজার স্বয়ংক্রিয়ভাবে একটি অপ্টিশন অনুরোধও প্রেরণ করে - আরও তথ্য এখানে । নীচে স্নিপেট এটি দেখায়:
fetch('http://example.com/api', {
method: 'POST',
headers: { 'Content-Type': 'application/json'}
});
Look in chrome-console -> network tab to 'api' request.
This is the OPTIONS request (the server does not allow sending a POST request)
আপনি সিওআরএস অনুরোধগুলি অনুমোদনের জন্য আপনার সার্ভারের কনফিগারেশনটি পরিবর্তন করতে পারেন।
এখানে একটি উদাহরণ কনফিগারেশন যার উপর পালাক্রমে হয় nginx উপর CORS সেটিং সঙ্গে খুব সতর্কতা অবলম্বন করা আবশ্যক - (ফাইল nginx.conf) always/"$http_origin"
nginx এবং "*"
অ্যাপাচি জন্য - এই কোন ডোমেইন থেকে CORS অবরোধ মুক্ত করবে।
location ~ ^/index\.php(/|$) {
...
add_header 'Access-Control-Allow-Origin' "$http_origin" always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
if ($request_method = OPTIONS) {
add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
add_header 'Content-Length' 0;
add_header 'Content-Type' 'text/plain charset=UTF-8';
return 204;
}
}
এখানে একটি উদাহরণ কনফিগারেশন যা অ্যাপাচি (.htaccess ফাইল) এ সিওআরএস চালু করে is
# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests |
# ------------------------------------------------------------------------------
# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/
# <IfModule mod_headers.c>
# Header set Access-Control-Allow-Origin "*"
# </IfModule>
# Header set Header set Access-Control-Allow-Origin "*"
# Header always set Access-Control-Allow-Credentials "true"
Access-Control-Allow-Origin "http://your-page.com:80"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"