মারাত্মক CORS যখন http: // লোকালহোস্টের উত্স হয়

183

আমি যথাযথ শিরোনাম দিয়ে সার্ভার (nginx / node.js) সেট করা সত্ত্বেও আমি এই CORS সমস্যাটির সাথে আটকে আছি।

আমি ক্রোম নেটওয়ার্ক ফলকে -> প্রতিক্রিয়া শিরোনামে দেখতে পাচ্ছি:

Access-Control-Allow-Origin:http://localhost

কৌতুক করা উচিত।

আমি এখন পরীক্ষার জন্য যে কোডটি ব্যবহার করি তা এখানে:

var xhr = new XMLHttpRequest();
xhr.onload = function() {
   console.log('xhr loaded');
};
xhr.open('GET', 'http://stackoverflow.com/');
xhr.send();

আমি পাই

এক্সএমএলএইচটিপিআরকোয়েস্ট http://stackoverflow.com/ লোড করতে পারে না । অরিজিন http: // লোকালহোস্ট অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-উত্স দ্বারা অনুমোদিত নয়।

আমার সন্দেহ হয় এটি ক্লায়েন্ট স্ক্রিপ্টে সমস্যা এবং সার্ভার কনফিগারেশন নয় ...

— whadar
সূত্র

44

না, স্ট্যাকওভারফ্লো ডট কমকে এই হেডারটি সেট করা দরকার, আপনি নয়। :এক্স. অন্যথায় একই উত্স নীতির মূল বিষয় কী হবে।

— ইসাইলিজা

3

ওভারফ্লো স্ট্যাক না করে আপনি সেট আপ করা সার্ভারটি অ্যাক্সেস করার চেষ্টা করুন। ;)

— নেক

DOH এর! ক্রোম (বা অন্যান্য ব্রাউজার) কে বলার উপায় আছে, আমার উত্স লোকালহোস্টের সময় শিরোনামটি অনুপস্থিত থাকলেও কি উত্সটি পাওয়া যায়?

— ওহাদার

আপনার কোডগুলি ক্রোমে চালান (20.0.1132.57, উইন্ডোজ 7), দুর্দান্ত কাজ করে।

— imwilsonxu

1

আপনি যদি কোনও বন্দরের সাথে লোকালহোস্ট ব্যবহার করছেন তবে এই উত্তরটি আমার জন্য সার্ভারফল্ট . com/a/673551/238261 কাজ করে ।

— নেলু

229

ক্রোম সিওআরএস অনুরোধগুলির জন্য লোকালহোস্টকে সমর্থন করে না (২০১০ সালে একটি বাগ খোলা হয়েছিল, 2014 সালে ওন্টফিক্স চিহ্নিত হয়েছে)।

এটি ঘুরে দেখার জন্য আপনি যেমন ডোমেন ব্যবহার করতে পারেন lvh.me(যা লোকালহোস্টের মতো 127.0.0.1 এ পয়েন্ট করে) বা --disable-web-securityপতাকা দিয়ে ক্রোম শুরু করতে (ধরে নিও যে আপনি কেবল পরীক্ষা করছেন)।

— ভক্ত
সূত্র

24

@ গ্রেেনসুইস - এটি লোকালহোস্টে পোস্ট করা হচ্ছে না। এটি লোকালহোস্ট থেকে পোস্ট করা যা সমস্যা।

— চিজো

9

এই বাগটি অবৈধ (এবং এটি চিহ্নিত করা হয়েছে - crbug.com/67743#c17 )। ইসাইলাইজার মন্তব্য সঠিক, লোকালহোস্টে এই শিরোনামগুলি যুক্ত করা আপনাকে যাদুতে অন্য সমস্ত সাইটে অ্যাক্সেস দেবে না। এটি দূরবর্তী সাইট যা এই শিরোলেখগুলির সাথে পরিবেশন করা প্রয়োজন।

— রব ডব্লু

22

শুধু 2 ঘন্টা Chrome- এ পরীক্ষা বুঝতে এটি ফায়ারফক্স জরিমানা ঠিকভাবে কাজ .. অতিবাহিতGrrrr...

— FloatingRock

11

। অন্য বিকল্প: সম্পাদনটি আপনার হোস্ট তাই দায়ের যে স্থানীয় [mysite] .com 127.0.0.1 পয়েন্ট, তারপর আপনার CORS ফাইল বানান অনুমতি * [mysite] .com।

— টম

6

আমি ফায়ারফক্সের সাথে একই সমস্যার মুখোমুখি হয়েছি। আমি এটি কেবল এজ এ বানাতে পারি! ভাল পোস্ট যদিও, দুর্দান্ত! :)

— লুইস গওভিয়া

53

@ বিউ'র উত্তরে, ক্রোম লোকালহোস্ট সিওআরএস অনুরোধগুলিকে সমর্থন করে না এবং এই দিকটিতে কোনও পরিবর্তন হওয়ার সম্ভাবনা নেই।

আমি মঞ্জুরি-নিয়ন্ত্রণ-মঞ্জুরি-উত্স ব্যবহার করি: * এই সমস্যাটি ঘুরে দেখার জন্য ক্রোম এক্সটেনশন । এক্সটেনশনটি সিওআরএসের জন্য প্রয়োজনীয় এইচটিটিপি শিরোনাম যুক্ত করবে:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: "GET, PUT, POST, DELETE, HEAD, OPTIONS"
Access-Control-Expose-Headers: <you can add values here>

সোর্স কোড GitHub থেকে প্রকাশিত হয় ।

নোট করুন যে এক্সটেনশনটি ডিফল্টরূপে সমস্ত ইউআরএল ফিল্টার করে। এটি কিছু ওয়েবসাইট ভাঙ্গতে পারে (উদাহরণস্বরূপ: ড্রপবক্স)। আমি এটিকে নীচের ইউআরএল ফিল্টার সহ কেবল লোকালহস্টের ইউআরএল ফিল্টার করতে পরিবর্তন করেছি

*://localhost:*/*

— Hanxue
সূত্র

14

আপনি যদি সমস্যাটি @ বিউ লিঙ্কগুলি পড়েন তবে আপনি দেখতে পাবেন যে ক্রোম 100% লোকালহোস্ট এবং এর থেকে ক্রস-অরিজিন অনুরোধগুলিকে সমর্থন করে। 2014 সালে ইস্যুটি বন্ধ হয়ে গেছে কারণ এটি পুনরুত্পাদন করা যায়নি। এই থ্রেডের বাকী আওয়াজ হ'ল ভুল কনফিগার্ড অ-অরিজিন সার্ভারের লোকেরা (এখানে মূল প্রশ্নের মতো)।

— মলম্বি

1

ক্রোমে আমার জন্য কবিতার মতো কাজ করেছিলেন

— আকাশ সাহাই

2

কাজের লিঙ্ক: chrome.google.com/webstore/detail/allow-cors-access-control/…

— প্যাডটটক

3

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

— স্যামুয়েল

হয়তো আমি কিছু ভুল করছি, তবে এই এক্সটেনশনটি আর আমার পক্ষে কাজ করবে বলে মনে হচ্ছে না।

— জেমস পার্কার

19

আসল সমস্যাটি হ'ল আমরা যদি -Allow-সমস্ত অনুরোধ ( OPTIONS& POST) এর জন্য সেট করি তবে ক্রোম এটি বাতিল করে দেবে। নিম্নলিখিত কোডটি আমার POSTসাথে ক্রোম সহ লোকালহোস্টে কাজ করে

<?php
if (isset($_SERVER['HTTP_ORIGIN'])) {
    //header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header("Access-Control-Allow-Origin: *");
    header('Access-Control-Allow-Credentials: true');    
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 
}   
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers:{$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

    exit(0);
} 
?>

— greensuisse
সূত্র

15

ওপি এনজিনেক্স / নোড.জেএস ব্যবহার করছে। পিএইচপি নয়

— কোড_মঙ্ক

4

ক্রোম একটি localhostউত্স থেকে সিওআরএসের সাথে অনুরোধ করবে ঠিক ঠিক। এটি ক্রোমের কোনও সমস্যা নয়।

আপনি লোড করতে না পারার কারণ http://stackoverflow.comহ'ল Access-Control-Allow-Originহেডারগুলি আপনার localhostউত্সকে অনুমতি দিচ্ছে না ।

— সরু চেপটা পেরেক-বিশেষ
সূত্র

2

দ্রুত এবং নোংরা ক্রোম এক্সটেনশন ফিক্স:

মোসিফ অরাইন এবং সিওআরএস চেঞ্জার

তবে, ক্রোম লোকালহোস্টের ক্রস-অরিজিন অনুরোধগুলিকে সমর্থন করে। একটি শিরোনাম যোগ করুন নিশ্চিত করুন Access-Control-Allow-Originজন্য localhost।

— kaleazy
সূত্র

আমি আমার অপেরাতে এই এক্সটেনশানটি যুক্ত করেছি এবং এখন এটি বাড়বে। এটি কখন চালু এবং বন্ধ হয় তা আমি কখনই বলতে পারি না তাই আমি কাজের জন্য ফায়ারফক্স ব্যবহার করি। এবং উন্নয়নের জন্য অপেরা। গুগল স্যুট এটি পছন্দ করে না এবং অন্যান্য জিনিসও তা পছন্দ করে না।

— ম্যাডডকস

0

কোনও এক্সটেনশনই আমার পক্ষে কাজ করেনি, তাই আমি একটি সাধারণ স্থানীয় প্রক্সি ইনস্টল করেছি। আমার ক্ষেত্রে https://www.npmjs.com/package/local-cors-proxy এটি 2 মিনিটের সেটআপ:

(তাদের সাইট থেকে)

npm install -g local-cors-proxy
এপিআই এর শেষ পয়েন্ট যা আমরা অনুরোধ করতে চাই তাতে সিওআরএস ইস্যু রয়েছে: https://www.yourdomain.ie/movies/list

প্রক্সি শুরু করুন: lcp --proxyUrl https://www.yourdomain.ie

তারপরে আপনার ক্লায়েন্ট কোডে, নতুন এপিআই এর শেষ পয়েন্ট: http://localhost:8010/proxy/movies/list

আমার জন্য কবজির মতো কাজ করেছেন: আপনার অ্যাপ্লিকেশন প্রক্সিটিকে কল করে, কে সার্ভারকে কল করে। জিরো কর্স সমস্যা।

— ড্যানিয়েল পি
সূত্র

0

আমি শিরোনামগুলিকে স্পর্শ না করে পরিবর্তে সার্ভারের দিকে একটি পুনর্নির্দেশ না করার সিদ্ধান্ত নিয়েছি এবং এটি একটি কবজির মতো জাগে।

নীচের উদাহরণটি অ্যাঙ্গুলারের বর্তমান সংস্করণ (বর্তমানে 9) এবং ওয়েবপ্যাকস ডেভসভার ব্যবহার করে সম্ভবত অন্য কোনও কাঠামো রয়েছে। তবে আমি মনে করি একই নীতিটি অন্যান্য ব্যাকেন্ডে কাজ করবে।

সুতরাং আমি প্রক্সি.কন.ফ.সোন ফাইলটিতে নিম্নলিখিত কনফিগারেশনটি ব্যবহার করছি :

{
  "/api": {
    "target": "http://localhost:3000",
    "pathRewrite": {"^/api" : ""},
   "secure": false
 }
}

কৌনিক ক্ষেত্রে আমি সেই কনফিগারেশনটি দিয়ে থাকি:

$ ng serve -o --proxy-config=proxy.conf.json

আমি সার্ভিড কমান্ডে প্রক্সিটি ব্যবহার করতে পছন্দ করি তবে আপনি এই কনফিগারেশনটি কৌণিক.জেসনতেও রাখতে পারেন:

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },

আরো দেখুন:

https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/

https://webpack.js.org/configuration/dev-server/#devserverproxy

— জুড়ি সিনিটসন
সূত্র