অরিজিনাল <রিগিন> অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-উত্স দ্বারা অনুমোদিত নয়

Question

XMLHttpRequest cannot load http://localhost:8080/api/test. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. 

আমি ক্রস ডোমেন আজাক্স অনুরোধগুলি সম্পর্কে পড়েছি এবং অন্তর্নিহিত সুরক্ষা সমস্যাটি বুঝতে পারি। আমার ক্ষেত্রে, 2 টি সার্ভার স্থানীয়ভাবে চলছে এবং পরীক্ষার সময় ক্রস ডোমেন অনুরোধগুলি সক্ষম করতে পছন্দ করে।

localhost:8080 - Google Appengine dev server
localhost:3000 - Node.js server

localhost:8080 - GAE serverনোড সার্ভার থেকে আমার পৃষ্ঠাটি লোড হওয়ার সময় আমি একটি এজ্যাক্স অনুরোধ জারি করছি । সবচেয়ে সহজ এবং নিরাপদ কোনটি ( disable-web-securityবিকল্প দিয়ে ক্রোম শুরু করতে চান না )। যদি আমাকে পরিবর্তন করতে হয় 'Content-Type', আমি নোড সার্ভারে এটি করা উচিত? কিভাবে?

Comments

একটি দ্রুততর সমাধান এখানে পাওয়া যেতে পারে: stackoverflow.com/a/21622564/4455570

— গ্যাব্রিয়েল Wamunyu

Answer 1

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

আপনাকে সার্ভারে সিওআরএস সক্ষম করতে হবে (লোকালহোস্ট: 8080)। এই সাইটটি দেখুন: http://enable-cors.org/

আপনাকে যা করতে হবে তা হ'ল সার্ভারে একটি HTTP শিরোনাম যুক্ত করুন:

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

বা, সরলতার জন্য:

Access-Control-Allow-Origin: *

আপনার সার্ভার কুকি সেট করার চেষ্টা করছে এবং আপনি যদি ব্যবহার করেন তবে "*" ব্যবহার করবেন না ভেবেছিলেন withCredentials = true

কোনও শংসাপত্রযুক্ত অনুরোধের প্রতিক্রিয়া জানাতে, সার্ভারকে অবশ্যই একটি ডোমেন নির্দিষ্ট করতে হবে এবং ওয়াইল্ড কার্ডিং ব্যবহার করতে পারবেন না।

আপনি withCredentialsএখানে আরও পড়তে পারেন

Comments

যদি আমরা এই শিরোনামটি এইচটিএমএলে যুক্ত করতে চাই তবে এর জন্য আমাদের কী করা উচিত?

— আজম আলভী

আমি মনে করি না যে এই বন্দরটি প্রয়োজনীয় ছিল তবে আপনি যদি 3000 এর মতো একটি মানহীন বন্দর ব্যবহার করেন তবে আপনাকে এটিকে কর্স নীতিতে অন্তর্ভুক্ত করতে হবে।

— মাইকেল কনার

এই প্রতিক্রিয়া জন্য ধন্যবাদ। কেবল এখানে * * হিসাবে মান হিসাবে ব্যবহারের সুরক্ষা সম্পর্কিত প্রভাবগুলি হাইলাইট করতে চাই। এটি সমস্ত উত্সের অনুমতি দেয়: বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে / এইচটিটিপি / হিয়ার্স /… প্রথম উদাহরণটির মতো মনে হয় সর্বনিম্ন অ্যাক্সেসের ক্ষেত্রে সবচেয়ে ভাল হবে। : কিভাবে এখানে একাধিক ডোমেন সঙ্গে এই কাজ সম্পর্কে বিস্তারিত stackoverflow.com/a/1850482/1566623

— ক্রিস্টোফার Kuttruff

স্পষ্টতার স্বার্থে, যখন বলা হয় যে আপনাকে "সার্ভারে একটি HTTP শিরোনাম যুক্ত করা দরকার", এর অর্থ এই Access-Control-Allow-Originযে সার্ভারটি প্রেরিত HTTP প্রতিক্রিয়াগুলিতে প্রদত্ত শিরোনামটি একটি অতিরিক্ত শিরোনাম হওয়া দরকার। এই শিরোনামটির সার্ভারের প্রতিক্রিয়ার অংশ হওয়া দরকার, এটি ক্লায়েন্টের অনুরোধের অংশ হওয়ার দরকার নেই । বিশেষত যা ঘটে তা ক্লায়েন্টের আপনার আসল অনুরোধটি করার আগে ঘটে, ব্রাউজার তার OPTIONSআগে একটি অনুরোধ প্রেরণ করে, এবং যদি সেই OPTIONSঅনুরোধটির সার্ভারের প্রতিক্রিয়াটিতে শিরোনাম না থাকে তবে ব্রাউজারটি আপনার পছন্দসই অনুরোধটি প্রেরণ করবে না।

— AjaxLeung

আপনার ব্যাকএন্ড সার্ভারগুলির প্রাসঙ্গিক টিপসটি সক্ষম-কর্টরস.আর.সি.তে পড়া গুরুত্বপূর্ণ।

— কার্ল্থ

Answer 2

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

ক্রোম এক্সটেনশানকে অনুমতি-নিয়ন্ত্রণ-অনুমতি দিন: *

Comments

আমি জানি না কেন আপনি আরও বেশি চালাচ্ছেন না। এটি ক্রোম সহ লোকালহোস্টে উন্নয়নের জন্য সর্বনিম্ন অনুপ্রবেশকারী।

— ডেভিড বেটজ

অবশ্যই সম্মত। দূরবর্তী সার্ভারের জন্য কনফিগারেশন পরিবর্তন না করেই দূরবর্তী সার্ভারের বিরুদ্ধে লোকালহোস্ট দেবের পক্ষে সক্ষম করা সহজ।

— জেনস ওয়েগার

@ ডেভিডবেটজ: আপনি এই সম্প্রসারণটি যাচাই করেছেন এবং অবশ্যই এটি বিশ্বাস করুন বিবেচনা করে;)

— হাইলেম

এই উত্তরের উত্তর হতে হবে! বিশেষত যেখানে লোকালহোস্ট উদ্বিগ্ন।

— মিঃ বেনিডিক্ট

এটি যদি ভাল সমাধান হয় তবে সিওআরএস প্রথম স্থানে উদ্ভাবিত হত না। এই শিরোনামটি কোনও হোস্টের কাছে প্রয়োগ করা CORS সুরক্ষা অক্ষম করে এবং আপনাকে কেবল আপনার নয়, আপনাকে দূষিত স্ক্রিপ্টগুলির কাছে প্রকাশ করে। আপনার ব্যাংক অ্যাকাউন্টটি হঠাৎ খালি হয়ে থাকলে অবাক হবেন না।

— ডোলম্যান

Answer 3

এটি সমাধানের জন্য আপনাকে CORS সক্ষম করতে হবে

যদি আপনার অ্যাপটি সাধারণ নোড.জেএস দিয়ে তৈরি করা হয়

আপনার প্রতিক্রিয়া শিরোনামে এটি সেট করুন

var http = require('http');

http.createServer(function (request, response) {
response.writeHead(200, {
    'Content-Type': 'text/plain',
    'Access-Control-Allow-Origin' : '*',
    'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE'
});
response.end('Hello World\n');
}).listen(3000);

যদি আপনার অ্যাপ্লিকেশনটি এক্সপ্রেস ফ্রেমওয়ার্ক দিয়ে তৈরি করা হয়

একটি CORS মিডলওয়্যার মত ব্যবহার করুন

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', "*");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
}

এবং মাধ্যমে আবেদন

app.configure(function() {
    app.use(allowCrossDomain);
    //some other code
});    

এখানে দুটি রেফারেন্স লিঙ্ক রয়েছে

1. কিভাবে-থেকে-allow-Cors-ইন-প্রকাশ করার-nodejs
2. ডাইভিং-ইন-নোড- জেএস -খুব প্রথম-অ্যাপ্লিকেশন দেখুন # অ্যাজাক্স বিভাগে

Comments

আপনি দয়া করে নির্দিষ্ট করতে পারেন, কিভাবে ব্যবহার করবেন config.allowedDomains। আমার ক্ষেত্রে বলুন আমি সেখানে কি ইউরি রাখব?

— বিএসআর

@ বিএসআর: আপনি ব্যবহার করতে পারেন *বা যেটিতে আপনি specific domainঅ্যাক্সেস দিতে চান।

— মিঠুনসথেেশ

সুতরাং আমি একমাত্র প্রাপ্তি app.configure()একটি ফাংশন ত্রুটি না?

— বজ্রাচার্য

@ প্রমেশবজরচায় আমি "app.configure" অংশ - কেবল "app.use (অনুমতিক্রসডোমাইন)" অন্তর্ভুক্ত করি নি, এবং এটি আমার পক্ষে কাজ করেছে।

— জিয়েরগোস স্পিকাস

Answer 4

আমি @ রকেট হ্যাজমাটের উত্তর গ্রহণ করি কারণ এটি আমাকে সমাধানের দিকে নিয়ে যায়। এটি অবশ্যই GAE সার্ভারে আমার শিরোনামটি সেট করা দরকার ছিল। আমি এই সেট করতে হয়েছিল

"Access-Control-Allow-Origin" -> "*"
"Access-Control-Allow-Headers" -> "Origin, X-Requested-With, Content-Type, Accept"

সেটিং শুধুমাত্র "Access-Control-Allow-Origin" ত্রুটি দিয়েছে

Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.

এছাড়াও, যদি লেখার টোকেন প্রেরণের দরকার হয় তবে এটিও যুক্ত করুন

"Access-Control-Allow-Credentials" -> "true"

এছাড়াও, ক্লায়েন্ট এ, সেট withCredentials

এর ফলে সার্ভারে 2 টি অনুরোধ প্রেরণ করা হয় যার একটি রয়েছে OPTIONS। এর সাথে আথ কুকি প্রেরণ করা হয় না, সুতরাং বাইরের লেখককে চিকিত্সা করা দরকার।

Answer 5

রাউটার.জেএসে গেট / পোস্ট পদ্ধতি কল করার আগে কেবল কোড যুক্ত করুন। এটি আমার জন্য ত্রুটি ছাড়াই কাজ করে।

//Importing modules @Brahmmeswar
const express = require('express');
const router = express.Router();

const Contact = require('../models/contacts');

router.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });

Answer 6

ক্রোম থেকে এজাক্স ব্যবহার করে ক্রস অরিজিন রিসোর্স কল করার সময় আমি একটি সমস্যার মুখোমুখি হয়েছি।

আমি আমার নোড জেএস অ্যাপ স্থাপন করতে নোড জেএস এবং স্থানীয় HTTP সার্ভার ব্যবহার করেছি।

আমি ক্রস উত্স সংস্থান অ্যাক্সেস যখন ত্রুটি সাড়া পেয়েছিলাম

আমি তার উপর একটি সমাধান পেয়েছি,

1) আমি আমার app.js ফাইলটিতে নীচে কোড যুক্ত করেছি

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");

2) আমার এইচটিএমএল পৃষ্ঠায় ক্রস অরিজিন রিসোর্স ব্যবহার করে $.getJSON();

$.getJSON("http://localhost:3000/users", function (data) {
    alert("*******Success*********");
    var response=JSON.stringify(data);
    alert("success="+response);
    document.getElementById("employeeDetails").value=response;
});

Answer 7

আপনি যদি এক্সপ্রেস ব্যবহার করেন তবে আপনি নিম্নরূপে মিডলওয়্যারগুলি ব্যবহার করতে পারেন:

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

Answer 8

আমদানির নীচে আপনার নোডজেএস সার্ভারে এটি যুক্ত করুন:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Answer 9

যদি আপনি এর পরে 403 পেয়ে থাকেন তবে দয়া করে WEB.XML টমক্যাট কনফিগারেশনের ফিল্টারগুলিকে নিম্নলিখিতটিতে হ্রাস করুন:

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
</filter>

Answer 10

অবশেষে আমি অ্যাপাচি টমক্যাট 8 এর উত্তর পেয়েছি

আপনাকে টমক্যাট ওয়েব.এক্সএমএল ফাইলটি সম্পাদনা করতে হবে।

সম্ভবত এটি ওয়েব অ্যাপস ফোল্ডারের ভিতরে থাকবে,

sudo gedit /opt/tomcat/webapps/your_directory/WEB-INF/web.xml

এটি খুঁজে এবং এটি সম্পাদনা করুন

<web-app>


<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
  <init-param>
    <param-name>cors.support.credentials</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>cors.preflight.maxage</param-name>
    <param-value>10</param-value>
  </init-param>
</filter>


<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>



</web-app>

এটি সমস্ত হোস্টকে অ্যাক্সেস-নিয়ন্ত্রণ-মঞ্জুরি-উত্সের অনুমতি দেবে। আপনার যদি এটি সমস্ত হোস্ট থেকে কেবল আপনার হোস্টে পরিবর্তন করতে হয় তবে আপনি সম্পাদনা করতে পারেন

<param-name>cors.allowed.origins</param-name>
<param-value>http://localhost:3000</param-value>

উপরের কোডটি * থেকে আপনার http: // আপনার_পাবলিক_আইপি বা http://www.example.com

আপনি এখানে টমক্যাট ফিল্টার ডকুমেন্টেশন উল্লেখ করতে পারেন

ধন্যবাদ

Answer 11

হাই এই নোডে সিওআরএস সমস্যা সমাধানের উপায় হ'ল নোড.জেজে সার্ভারের "এপিআই" সাইডে এই লাইনগুলি যুক্ত করুন (বা আপনার সার্ভারের ফাইলটি কখনও), অবশ্যই "কর্স" ইনস্টল করার বিষয়টি নিশ্চিত করুন

    const express = require('express');
    const app = express();
    app.use(express.json());
    var cors = require('cors');
    app.use(cors());

Answer 12

ডেটা টাইপ ব্যবহার করুন: 'জসনপ', আমার জন্য কাজ করে।

   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 13

পিএইচপি-র জন্য, শিরোনাম সেট করতে এটি ব্যবহার করুন।

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

Answer 14

router.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "*");
res.header("Access-Control-Allow-Headers", "*");
next();});

এটিকে আপনার রুটগুলিতে যুক্ত করুন যা আপনি সামনের প্রান্ত থেকে কল করছেন। প্রাক্তন- আপনি যদি http: // লোকালহোস্ট: 3000 / ব্যবহারকারী / নিবন্ধকের জন্য কল করেন তবে আপনাকে অবশ্যই এই কোড টুকরাটি আপনার ব্যাক-এন্ড .js ফাইলে যুক্ত করতে হবে যা এই রুটটি দেয়।

Answer 15

যদি কেউ সমাধানটির সন্ধান করে তবে আপনি যদি এক্সপ্রেসটি এখানে ব্যবহার করেন তবে দ্রুত সমাধান।

const express = require('express')
const cors = require('cors')
const app = express()

1) এনপিএম ব্যবহার করে কর্স ইনস্টল করুন npm install cors --save

2) এটি আমদানি করুন [প্রয়োজনীয়] const cors = require('cors')

3) মিডলওয়্যার হিসাবে এটি ব্যবহার করুন app.use(cors())

ইনসটেল এবং করগুলির ব্যবহারের জন্য বিশদ । আশা করি এটি কার্যকর হয় it

Answer 16

আপনি যদি গুগল ক্রোমে থাকেন তবে এই অ্যাড-অনটি ইনস্টল করার চেষ্টা করুন:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related