কোনও আরএসটি এপিআই থেকে ডেটা পাওয়ার চেষ্টা করার সময় কোনও 'অ্যাক্সেস-কন্ট্রোল-অলজিন-অরিজিন' শিরোনামটি অনুরোধ করা সংস্থানটিতে উপস্থিত থাকে না —

Question

আমি এইচপি আলমের REST এপিআই থেকে কিছু ডেটা আনার চেষ্টা করছি। এটি একটি ছোট কার্ল স্ক্রিপ্টের সাথে বেশ ভালভাবে কাজ করে - আমি আমার ডেটা পাই।

এখন জাভাস্ক্রিপ্ট, আনতে এবং ES6 (আরও কম) এর সাহায্যে এটি করা বড় সমস্যা বলে মনে হচ্ছে। আমি এই ত্রুটি বার্তাটি পেতে থাকি:

ফেচ এপিআই লোড করতে পারে না। প্রিফলাইট অনুরোধের প্রতিক্রিয়া অ্যাক্সেস নিয়ন্ত্রণ চেকটি পাস করে না: অনুরোধকৃত উত্সটিতে কোনও 'অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-উত্স' শিরোনাম উপস্থিত নেই। উত্স ' http://127.0.0.1:3000 ' এ অ্যাক্সেসের অনুমতি নেই। প্রতিক্রিয়াটিতে HTTP স্থিতি কোড 501 ছিল an যদি কোনও অস্বচ্ছ প্রতিক্রিয়া আপনার প্রয়োজনগুলি সরবরাহ করে তবে অনুরোধের মোডটিকে 'ন-কর্স' এ সেট করুন CORS অক্ষম করে রিসোর্স আনতে।

আমি বুঝতে পেরেছি কারণ এটি আমার লোকালহস্টের মধ্যে থেকে ডেটা আনার চেষ্টা করছি এবং সমাধানটি সিওআরএস ব্যবহার করা উচিত। এখন আমি ভেবেছিলাম আমি আসলে এটি করেছি তবে কোনওভাবে এটি হেডারে যা লিখছে তা উপেক্ষা করে বা সমস্যাটি অন্য কিছু?

সুতরাং, একটি বাস্তবায়ন সমস্যা আছে? আমি কি এটা ভুল করছি? দুর্ভাগ্যক্রমে আমি সার্ভার লগগুলি চেক করতে পারি না। আমি এখানে সত্যিই কিছুটা আটকে আছি।

function performSignIn() {

  let headers = new Headers();

  headers.append('Content-Type', 'application/json');
  headers.append('Accept', 'application/json');

  headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
  headers.append('Access-Control-Allow-Credentials', 'true');

  headers.append('GET', 'POST', 'OPTIONS');

  headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));

  fetch(sign_in, {
      //mode: 'no-cors',
      credentials: 'include',
      method: 'POST',
      headers: headers
    })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed : ' + error.message));
}

আমি ক্রোম ব্যবহার করছি। আমি সেই ক্রোম সিওআরএস প্লাগইনটি ব্যবহার করার চেষ্টাও করেছি, তবে তার পরে আমি অন্য একটি ত্রুটি বার্তা পাচ্ছি:

অনুরোধের শংসাপত্র মোডে 'অন্তর্ভুক্ত' থাকাকালীন প্রতিক্রিয়াতে 'অ্যাক্সেস-কন্ট্রোল-অলজন-অরিজিন' শিরোনামের মান অবশ্যই ওয়াইল্ডকার্ড '*' হওয়া উচিত নয়। উত্স ' http://127.0.0.1:3000 ' এ অ্যাক্সেসের অনুমতি নেই। XMLHttpRequest দ্বারা শুরু করা অনুরোধগুলির শংসাপত্রের মোডটি শংসাপত্রের বৈশিষ্ট্য সহ নিয়ন্ত্রণ করা হয়।

Answer 1

এই উত্তরটি অনেকগুলি জমি জুড়ে তাই এটি তিন ভাগে বিভক্ত:

• "কোনও অ্যাক্সেস-কন্ট্রোল-অরিজিন-অরিজিন শিরোনাম" সমস্যাগুলির আশেপাশের পেতে কীভাবে একটি সিওআরএস প্রক্সি ব্যবহার করবেন
• কীভাবে সিওআরএস প্রিফলাইট এড়ানো যায়
• কীভাবে "অ্যাক্সেস-নিয়ন্ত্রণ-মঞ্জুরি-উত্স শিরোনাম অবশ্যই ওয়াইল্ডকার্ড না হওয়া উচিত" সমস্যাগুলি

---

"কোনও অ্যাক্সেস-কন্ট্রোল-অরিজিন-অরিজিন শিরোনাম" সমস্যাগুলির আশেপাশের পেতে কীভাবে একটি সিওআরএস প্রক্সি ব্যবহার করবেন

আপনি যদি সার্ভারটি নিয়ন্ত্রণ না করেন তবে আপনার সীমান্ত জাভাস্ক্রিপ্ট কোডটি একটি অনুরোধ প্রেরণ করছে এবং সেই সার্ভারের প্রতিক্রিয়াটি সমস্যা হ'ল প্রয়োজনীয় Access-Control-Allow-Originশিরোনামের অভাব , আপনি এখনও কাজ করার জন্য জিনিসগুলি পেতে পারেন - একটি মাধ্যমে অনুরোধ করে CORS প্রক্সি। এটি কীভাবে কাজ করে তা দেখানোর জন্য প্রথমে এখানে এমন কিছু কোড রয়েছে যা একটি সিওআরএস প্রক্সি ব্যবহার করে না:

const url = "https://example.com"; // site that doesn’t send Access-Control-*
fetch(url)
.then(response => response.text())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))

কারণ catchব্লক আঘাত পরার আছে, ব্রাউজার বাধা প্রতিক্রিয়া যা থেকে ফিরে আসে অ্যাক্সেস করা থেকে কোড https://example.com। এবং ব্রাউজারটি এর কারণটি হল, প্রতিক্রিয়াটিতে Access-Control-Allow-Originপ্রতিক্রিয়া শিরোনামের অভাব রয়েছে ।

এখন, এখানে ঠিক একই উদাহরণ কিন্তু কেবল একটি CORS প্রক্সি যুক্ত করা হয়েছে:

const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://example.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
.then(response => response.text())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))

দ্রষ্টব্য: https://cors-anywhere.herokuapp.com আপনি চেষ্টা করার পরে যদি তা ডাউন বা অনুপলব্ধ থাকে, তবে কীভাবে হিরোকুতে আপনার নিজস্ব সিওআরএস যে কোনও জায়গায় সার্ভার স্থাপন করতে কেবল নীচের ২-৩ মিনিটের মধ্যে দেখুন below

উপরের দ্বিতীয় কোড স্নিপেট সাফল্যের সাথে প্রতিক্রিয়া অ্যাক্সেস করতে পারে কারণ অনুরোধ ইউআরএল গ্রহণ এবং এটি https://cors-anywhere.herokuapp.com/https://example.com- এ পরিবর্তিত হয়েছে - কেবলমাত্র প্রক্সি ইউআরএলটির সাথে এটি উপসর্গ করার কারণে — সেই প্রক্সিটি দিয়ে যাওয়ার অনুরোধ, যা এরপরে:

1. ফরওয়ার্ডটি ফরওয়ার্ড করুন https://example.com।
2. থেকে প্রতিক্রিয়া প্রাপ্ত https://example.com।
3. Access-Control-Allow-Originপ্রতিক্রিয়াতে শিরোনাম যুক্ত করে ।
4. অনুরোধ করা সামনের কোডটিতে ফিরে সেই সংযুক্ত শিরোনাম সহ সেই প্রতিক্রিয়াটি পাস করে।

তারপরে ব্রাউজারটি ফ্রন্টএন্ড কোডটিকে প্রতিক্রিয়া অ্যাক্সেস করার অনুমতি দেয়, কারণ Access-Control-Allow-Originপ্রতিক্রিয়া শিরোনাম সহ সেই প্রতিক্রিয়া ব্রাউজারটি যা দেখায়।

আপনি https://github.com/Rob--W/cors-anywhere/ থেকে কোড ব্যবহার করে সহজেই নিজের প্রক্সি চালাতে পারেন ।
5 টি কমান্ড সহ আপনি আক্ষরিক মাত্র 2-3 মিনিটে হিরোকুর কাছে নিজের প্রক্সিটি সহজেই স্থাপন করতে পারেন:

git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master

এই কমান্ডগুলি চালনার পরে, আপনি নিজের সিওআরএস যে কোনও জায়গায় যে কোনও সার্ভারের সাথে চলমান শেষ করবেন, যেমন, https://cryptic-headland-94862.herokuapp.com/ । সুতরাং আপনার অনুরোধটি ইউআরএলটির সাথে https://cors-anywhere.herokuapp.comউপসর্গ করার পরিবর্তে এটি আপনার নিজের উদাহরণের জন্য ইউআরএলকে উপস্থাপন করুন; উদাহরণস্বরূপ, https://cryptic-headland-94862.herokuapp.com/https://example.com ।

সুতরাং আপনি যদি https://cors-anywhere.herokuapp.com ব্যবহার করার চেষ্টা করতে যান, আপনি এটি নীচে পেয়েছেন (যা এটি কখনও কখনও হবে) তবে হিরোকু অ্যাকাউন্ট পাওয়ার বিষয়ে বিবেচনা করুন (যদি আপনি ইতিমধ্যে না থাকেন) এবং 2 নিন বা 3 মিনিটের উপরে হিরোকুতে আপনার নিজস্ব সিওআরএস যে কোনও জায়গায় সার্ভার স্থাপন করতে উপরের পদক্ষেপগুলি করতে।

নির্বিশেষে, আপনি নিজের চালনা করেন বা https://cors-anywhere.herokuapp.com বা অন্যান্য উন্মুক্ত প্রক্সি ব্যবহার করুন না কেন, এই সমাধানটি অনুরোধটি ব্রাউজারদের একটি CORS প্রিফলাইট OPTIONSঅনুরোধটি করতে পরিচালিত করে এমনকী works কারণ সেই ক্ষেত্রে, প্রক্সি এছাড়াও ফেরত পাঠায় Access-Control-Allow-Headersএবং Access-Control-Allow-Methodspreflight সফল করার জন্য প্রয়োজন হেডার।

---

কীভাবে সিওআরএস প্রিফলাইট এড়ানো যায়

প্রশ্নটিতে কোডটি একটি কর্স প্রিফলাইটকে ট্রিগার করে - যেহেতু এটি একটি Authorizationশিরোনাম প্রেরণ করে ।

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

এমনকি এটি ছাড়া, Content-Type: application/jsonশিরোনামটি প্রিফলাইটটিও ট্রিগার করবে।

"কি preflight" অর্থ: সামনে ব্রাউজার চেষ্টা POSTপ্রশ্নে কোডে, এটি প্রথমে একটি পাঠাব OPTIONSসার্ভারে অনুরোধ - নির্ধারণ করার জন্য একটি ক্রশ-অরিজিন প্রাপ্তির যদি সার্ভার নির্বাচন-ইন করা হয় POSTযে অন্তর্ভুক্ত Authorizationএবং Content-Type: application/jsonহেডার।

এটি একটি ছোট কার্ল স্ক্রিপ্টের সাথে বেশ ভালভাবে কাজ করে - আমি আমার ডেটা পাই।

যথাযথভাবে পরীক্ষা করার জন্য curl, আপনাকে অবশ্যই OPTIONSব্রাউজার প্রিফ্লাইট অনুরোধটি অনুকরণ করতে হবে :

curl -i -X OPTIONS -H "Origin: http://127.0.0.1:3000" \
    -H 'Access-Control-Request-Method: POST' \
    -H 'Access-Control-Request-Headers: Content-Type, Authorization' \
    "https://the.sign_in.url"

… https://the.sign_in.urlআপনার আসল sign_inইউআরএল যাই হোক না কেন দ্বারা প্রতিস্থাপিত ।

ব্রাউজারটি সেই OPTIONSঅনুরোধটি থেকে যে প্রতিক্রিয়া দেখতে পাবে তার অবশ্যই এই জাতীয় শিরোনাম অন্তর্ভুক্ত করতে হবে:

Access-Control-Allow-Origin:  http://127.0.0.1:3000
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type, Authorization

যদি OPTIONSপ্রতিক্রিয়াতে এই শিরোনামগুলি অন্তর্ভুক্ত না করা হয় তবে ব্রাউজারটি ঠিক সেখানেই থামবে এবং POSTঅনুরোধটি প্রেরণের চেষ্টা করবে না । এছাড়াও, প্রতিক্রিয়াটির জন্য এইচটিটিপি স্থিতি কোডটি অবশ্যই 2Xxx — সাধারণত 200 বা 204 হতে হবে it's এটি যদি অন্য কোনও স্থিতি কোড হয় তবে ব্রাউজারটি ঠিক সেখানেই থামবে।

প্রশ্নের সার্ভারটি OPTIONS501 স্থিতি কোডের সাথে অনুরোধটির প্রতিক্রিয়া জানাচ্ছে , যা স্পষ্টতই বোঝাতে চাইছে এটি OPTIONSঅনুরোধের জন্য সমর্থনটি কার্যকর করে না এমনটি বোঝানোর চেষ্টা করছে । অন্যান্য সার্ভারগুলি সাধারণত এই ক্ষেত্রে 405 "পদ্ধতি অনুমোদিত নয়" স্থিতি কোড দিয়ে সাড়া দেয়।

সুতরাং POSTসার্ভার যদি OPTIONS405 বা 501 অথবা 200 বা 204 ব্যতীত অন্য কোনও কিছু দিয়ে যদি অনুরোধটির প্রতিক্রিয়া জানায় বা প্রয়োজনীয় লোকদের সাথে সাড়া না দেয় তবে আপনি কখনই আপনার সম্মুখ সীমান্তের জাভাস্ক্রিপ্ট কোড থেকে সরাসরি সেই সার্ভারে অনুরোধ করতে পারবেন না going প্রতিক্রিয়া শিরোনাম।

প্রশ্নের ক্ষেত্রে প্রিফলাইটটি ট্রিগার না করার উপায় হ'ল:

• যদি সার্ভারটির জন্য Authorizationঅনুরোধ শিরোনামের প্রয়োজন না হয় তবে পরিবর্তে (উদাহরণস্বরূপ) অনুরোধের শিরোনামে POSTবা ক্যোয়ারি প্যারামিটার হিসাবে এম্বেড করা প্রমাণীকরণ ডেটার উপর নির্ভর করে
• সার্ভারের যদি POSTকোনও Content-Type: application/jsonমিডিয়ার প্রকারের জন্য শরীরের প্রয়োজন না হয় তবে পরিবর্তে নামটির (বা যা কিছু) যার মান JSON ডেটা বলে তার সাথে POSTশরীর গ্রহণ করেapplication/x-www-form-urlencodedjson

---

কীভাবে "অ্যাক্সেস-নিয়ন্ত্রণ-মঞ্জুরি-উত্স শিরোনাম অবশ্যই ওয়াইল্ডকার্ড না হওয়া উচিত" সমস্যাগুলি

আমি আর একটি ত্রুটি বার্তা পাচ্ছি:

অনুরোধের শংসাপত্র মোডে 'অন্তর্ভুক্ত' থাকাকালীন প্রতিক্রিয়াতে 'অ্যাক্সেস-কন্ট্রোল-অলজন-অরিজিন' শিরোনামের মান অবশ্যই ওয়াইল্ডকার্ড '*' হওয়া উচিত নয়। উত্স ' http://127.0.0.1:3000 ' এ অ্যাক্সেসের অনুমতি নেই। XMLHttpRequest দ্বারা শুরু করা অনুরোধগুলির শংসাপত্রের মোডটি শংসাপত্রের বৈশিষ্ট্য সহ নিয়ন্ত্রণ করা হয়।

শংসাপত্রাদি অন্তর্ভুক্ত এমন একটি অনুরোধের জন্য, Access-Control-Allow-Originপ্রতিক্রিয়া শিরোনামের মানটি থাকলে ব্রাউজারগুলি আপনার অগ্রণী জাভাস্ক্রিপ্ট কোডটিকে প্রতিক্রিয়া অ্যাক্সেস করতে দেয় না *। পরিবর্তে সেই ক্ষেত্রে মানটি অবশ্যই আপনার ফ্রন্টএন্ড কোডের উত্সের সাথে অবশ্যই মিলবে http://127.0.0.1:3000।

MDN HTTP অ্যাক্সেস নিয়ন্ত্রণ (সিওআরএস) নিবন্ধে শংসাপত্রযুক্ত অনুরোধ এবং ওয়াইল্ডকার্ডগুলি দেখুন ।

আপনি যদি যে সার্ভারটিতে অনুরোধটি পাঠাচ্ছেন সেটি নিয়ন্ত্রণ করেন, তবে এই ক্ষেত্রে মোকাবেলার একটি সাধারণ উপায় হ'ল Originঅনুরোধ শিরোনামের মান গ্রহণের জন্য সার্ভারটি কনফিগার করা এবং Access-Control-Allow-Originপ্রতিক্রিয়া শিরোনামের মানটির প্রতিধ্বনি / প্রতিবিম্বিত করা । উদাহরণস্বরূপ, nginx সহ:

add_header Access-Control-Allow-Origin $http_origin

তবে এটি কেবল একটি উদাহরণ; অন্যান্য (ওয়েব) সার্ভার সিস্টেমগুলি মূল মানগুলি প্রতিধ্বনির অনুরূপ উপায় সরবরাহ করে।

---

আমি ক্রোম ব্যবহার করছি। আমি সেই ক্রোম সিওআরএস প্লাগইনটি ব্যবহার করার চেষ্টা করেছি

সেই ক্রোম সিওআরএস প্লাগইন স্পষ্টতই সহজ সরলভাবে Access-Control-Allow-Origin: *ব্রাউজারটির প্রতিক্রিয়াটিতে একটি শিরোনামকে ইনজেক্ট করে। প্লাগইনটি যদি বুদ্ধিমান হয় তবে এটি কী করবে তা সেই জাল Access-Control-Allow-Originপ্রতিক্রিয়া শিরোনামের মানটিকে আপনার সীমান্ত জাভাস্ক্রিপ্ট কোডের আসল উত্সে সেট করে http://127.0.0.1:3000।

সুতরাং পরীক্ষার জন্য এমনকি, প্লাগইন ব্যবহার এড়াতে। এটি কেবল একটি বিভ্রান্তি। আপনি যদি সার্ভার থেকে কোনও ব্রাউজার ফিল্টার না করে কী প্রতিক্রিয়া পান তা পরীক্ষা করতে চান তবে curl -Hউপরের মতো ব্যবহার করা ভাল ।

---

fetch(…)প্রশ্নে অনুরোধের জন্য যতদূর সীমান্ত জাভাস্ক্রিপ্ট কোড :

headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');

সেই লাইনগুলি সরান। Access-Control-Allow-*হেডার হয় প্রতিক্রিয়া হেডার। আপনি তাদের অনুরোধে কখনই প্রেরণ করতে চান না। কেবলমাত্র প্রভাবটি হ'ল একটি প্রিফলাইট করতে ব্রাউজারকে ট্রিগার করা।

Comments

সুতরাং ইউআরএলটি এমন দেখাচ্ছে: 127.0.0.1:9999/127.0.0.1:5000 কর্স সহ, তাই না?

— daniel.lozynski

আপনি আপনার নিজস্ব উদাহরণস্বরূপ চালিয়ে থাকেন github.com/Rob--W/cors-anywhere এ কোড 127.0.0.1:9999 এবং আপনি একটি অনুরোধ করতে চাই 127.0.0.1:5000 , হ্যাঁ

— sideshowbarker

দুর্দান্ত উত্তর, আমার সমস্যাটি হ'ল দূরবর্তী সার্ভারটি বিকল্পগুলির অনুরোধগুলিতে সাড়া দিচ্ছে না, তাই বয়সের মতো মনে হচ্ছে অনুরোধগুলি এবং শিরোনামগুলির সাথে বিড়বিড় করার পরে আমি এটি শিরোনামগুলি সরিয়ে সমাধান করেছি Content-Typeএবং Access-Control-Allow-Origin- ধন্যবাদ!

— মরভেল

আপনি যেটি নিয়ন্ত্রণ করেন তা না হলে প্রক্সি ব্যবহার করার ধারণাটি আমার পছন্দ হয় না, অন্যথায় আপনি অবিশ্বস্ত তৃতীয় পক্ষের মাধ্যমে ডেটা

— আনছেন

এটি গভীর-গভীর এবং দুর্দান্ত উত্তর আপনাকে ধন্যবাদ, অক্ষম-ওয়েব সুরক্ষা পতাকা সহ ওপেন ক্রোম দেওয়ার সময় আমি ব্যক্তিগতভাবে যা করেছি তা কার্যকর হয়েছিল it open /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir

— করুণ

Answer 2

পোর্ট নম্বর সহ ক্লায়েন্টের ইউআরএল এবং সার্ভারের ইউআরএল না মিললে এই ত্রুটি ঘটে। এই ক্ষেত্রে আপনাকে সিওআরএসের জন্য আপনার পরিষেবা সক্ষম করতে হবে যা ক্রস অরিজিন রিসোর্স ভাগ করে নেওয়া।

আপনি যদি একটি স্প্রিং আরএসইটি পরিষেবা হোস্ট করছেন তবে আপনি এটি স্প্রিং ফ্রেমওয়ার্কের ব্লগ পোস্ট সিওআরএস সমর্থনটিতে পেতে পারেন ।

আপনি যদি কোনও নোড.জেএস সার্ভার ব্যবহার করে কোনও পরিষেবা হোস্ট করছেন

1. নোড.জেএস সার্ভারটি বন্ধ করুন।
2. npm install cors --save

3. আপনার সার্ভার.জেএস-এ নিম্নলিখিত লাইনগুলি যুক্ত করুন

   var cors = require('cors')
   
   app.use(cors()) // Use this after the variable declaration

Comments

কোনও সমস্যা ছাড়াই কাজ করেছেন ... বসন্ত সংস্থান লিঙ্কের সাথে খুব সহায়ক .. অনেক অনেক ধন্যবাদ

— রাজেশ এমবিএম

including the port number:(

— স্কটিসিয়াস

সত্যই সহায়ক আপনি আমার দিনটি তৈরি করেছেন

— কুণাল পাল

পোর্ট নম্বর আমার জীবন সংরক্ষিত

— ashad

সর্বদা সহজ উত্তর ধন্যবাদ :)

— স্ট্যাকগুলি

Answer 3

আপনার উত্স-এন্ডে অনুরোধ শিরোনাম হিসাবে নিম্নলিখিত কোডটি যুক্ত করার কারণে সমস্যাটি দেখা দিয়েছে :

headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');

এই শিরোনামগুলি অনুরোধ নয়, প্রতিক্রিয়া সম্পর্কিত । সুতরাং লাইন সহ এগুলি সরিয়ে ফেলুন :

headers.append('GET', 'POST', 'OPTIONS');

আপনার অনুরোধে 'বিষয়বস্তুর ধরণ: অ্যাপ্লিকেশন / জেসন' রয়েছে, সুতরাং এটি সিওআরএস প্রিফলাইট বলে যা ট্রিগার করে। এর ফলে ব্রাউজার অপ্টিশন পদ্ধতিতে অনুরোধটি পাঠিয়েছে। বিস্তারিত তথ্যের জন্য CORS প্রিফলাইট দেখুন ।
সুতরাং আপনার ব্যাক- এন্ডে, আপনাকে প্রতিক্রিয়ার শিরোনামগুলি ফেরত দিয়ে এই প্রাক-আলোকিত অনুরোধটি পরিচালনা করতে হবে:

Access-Control-Allow-Origin : http://localhost:3000
Access-Control-Allow-Credentials : true
Access-Control-Allow-Methods : GET, POST, OPTIONS
Access-Control-Allow-Headers : Origin, Content-Type, Accept

অবশ্যই, আসল বাক্য গঠন আপনার ব্যাক-এন্ডের জন্য আপনি যে প্রোগ্রামিং ভাষা ব্যবহার করেন তার উপর নির্ভর করে।

আপনার সামনের প্রান্তে এটি এমন হওয়া উচিত:

function performSignIn() {
    let headers = new Headers();

    headers.append('Content-Type', 'application/json');
    headers.append('Accept', 'application/json');
    headers.append('Authorization', 'Basic ' + base64.encode(username + ":" +  password));
    headers.append('Origin','http://localhost:3000');

    fetch(sign_in, {
        mode: 'cors',
        credentials: 'include',
        method: 'POST',
        headers: headers
    })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed : ' + error.message));
}

Comments

এটি শীর্ষস্থানীয় উত্তর হওয়া উচিত - বিশেষত কোনও তৃতীয় পক্ষের মাধ্যমে রাউটিং করে আমি সিওআরএস বাইপাস করার ধারণাটি সত্যিই অপছন্দ করি।

— ডেভমঙ্গুজ

ওহে, দয়া করে 'শিরোনাম ()' কী?

— মিতসু

@ মিৎসু আপনি যদি লাইনটি উল্লেখ করেন: হেডারগুলি = নতুন শিরোনাম () দিন; উপরে, তারপরে এটি HTTP অনুরোধ বা প্রতিক্রিয়া শিরোনামগুলির সাথে ক্রিয়া করা এফআইপি এর ইন্টারফেস। এটি ব্যবহারের বিশদ পাশাপাশি উদাহরণগুলি পেতে বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে / এপিআই / হেডাররা দেখুন ।

— লেক্স সফট

পরিষ্কার এবং সুনির্দিষ্ট উত্তর .. এর যৌক্তিক এবং ঠিক সমস্যাটি সম্বোধন করে। - থেক্স

— ধমিকা

Answer 4

আমার ক্ষেত্রে, আমি নীচের সমাধানটি ব্যবহার করি

সামনের প্রান্ত বা কৌণিক

post(
    this.serverUrl, dataObjToPost,
    {
      headers: new HttpHeaders({
           'Content-Type':  'application/json',
         })
    }
)

ব্যাক-এন্ড (আমি পিএইচপি ব্যবহার করি)

header("Access-Control-Allow-Origin: http://localhost:4200");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
print_r($request);

Answer 5

"আমার শিরোনামহীন " সমস্যাগুলি পেতে কোনও CORS প্রক্সি কীভাবে ব্যবহার করবেন সে সম্পর্কে কেবল আমার দুটি সেন্টAccess-Control-Allow-Origin

আপনারা যারা পিএইচপি নিয়ে ব্যাকেন্ডে কাজ করছেন তাদের জন্য, "সিওআরএস প্রক্সি" মোতায়েন করা এতটাই সহজ:

1. নিম্নলিখিত বিষয়বস্তু সহ 'ন-কর্স.পিএপিপি' নামে একটি ফাইল তৈরি করুন:

   $URL = $_GET['url']; echo json_encode(file_get_contents($URL)); die();

2. আপনার সামনের প্রান্তে, এমন কিছু করুন:

   fetch('https://example.com/no-cors.php' + '?url=' + url) .then(response=>{*/Handle Response/*})

Answer 6

এটা সরাও:

credentials: 'include',

Answer 7

dataType: 'jsonp'আমার জন্য কাজ করে ।

   async function get_ajax_data(){
       var _reprojected_lat_lng = await $.ajax({
                                type: 'GET',
                                dataType: 'jsonp',
                                data: {},
                                url: _reprojection_url,
                                error: function (jqXHR, textStatus, errorThrown) {
                                    console.log(jqXHR)
                                },
                                success: function (data) {
                                    console.log(data);

                                    // note: data is already json type, you
                                    //       just specify dataType: jsonp
                                    return data;
                                }
                            });


 } // function               

Answer 8

আমার ক্ষেত্রে, ওয়েব সার্ভার "অপশন" পদ্ধতিটিকে বাধা দিয়েছে

বিকল্পগুলির পদ্ধতির জন্য আপনার ওয়েব সার্ভারটি পরীক্ষা করুন

• অ্যাপাচি: https://www-01.ibm.com/support/docview.wss?uid=ibm10735209
• ওয়েবটিয়ার: 4.4.6 বিকল্প পদ্ধতিটি অক্ষম করা https://docs.oracle.com/cd/E23943_01/web.1111/e10144/getstart.htm#HSADM174
• nginx: https://medium.com/@hariomvashisth/cors-on-nginx-be38dd0e19df

আমি "ওয়েবটিয়ার" ব্যবহার করছি

/www/webtier/domains/[domainname]/config/fmwconfig/components/OHS/VCWeb1/httpd.conf

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_METHOD} ^OPTIONS
  RewriteRule .* . [F]
</IfModule>

পরিবর্তন

<IfModule mod_rewrite.c>
  RewriteEngine off
  RewriteCond %{REQUEST_METHOD} ^OPTIONS
  RewriteRule .* . [F]
</IfModule>

Answer 9

আমি স্প্রিং আরইএসটি-র সাথে কাজ করছিলাম এবং আমি এটি সমাধান করে WebMvcConfigurer এ অনুমোদিত মথডগুলি যুক্ত করেছিলাম।

@Value( "${app.allow.origins}" )
    private String allowOrigins;    
@Bean
public WebMvcConfigurer corsConfigurer() {
            System.out.println("allow origin: "+allowOrigins);
            return new WebMvcConfigurerAdapter() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {
                    registry.addMapping("/**")
                    //.allowedOrigins("http://localhost")
                    .allowedOrigins(allowOrigins)
                    .allowedMethods("PUT", "DELETE","GET", "POST");
                }
            };
        }

Answer 10

আমি আমার স্থানীয় এই ত্রুটি পেয়েছিলাম। আমি প্রশাসক হিসাবে ভিজ্যুয়াল স্টুডিও চালিয়েছি এবং এটি সমাধান হয়েছে।