কোনও 'অ্যাক্সেস-নিয়ন্ত্রণ-অনুমতি দিন' - নোড / অ্যাপাচি পোর্ট সমস্যা


260

আমি নোড / এক্সপ্রেস ব্যবহার করে এবং অ্যাঙ্গুলারজ ব্যবহার করে ডেটা টানতে চেষ্টা করার জন্য একটি ছোট এপিআই তৈরি করেছি তবে আমার এইচটিএমএল পৃষ্ঠাটি লোকালহোস্টে অ্যাপাচের অধীনে চলছে: ৮৮৮৮ এবং নোড এপিআই port০০০ পোর্টে শোনা যাচ্ছে, তাই আমি 'এক্সেস-কন্ট্রোল- পাচ্ছি না অনুমতি দিন বংশোদ্ভূত। আমি চেষ্টা করেছি node-http-proxyএবং ভিহোস্টস অ্যাপাচি ব্যবহার করেছি তবে খুব বেশি সাফল্য নেই, দয়া করে নীচে সম্পূর্ণ ত্রুটি এবং কোড দেখুন।

XMLHttpRequest লোকালহোস্ট: 3000 লোড করতে পারে না। অনুরোধকৃত উত্সটিতে কোনও 'অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-উত্স' শিরোনাম উপস্থিত নেই। মূল 'লোকালহোস্ট: 8888' এ অ্যাক্সেসের অনুমতি নেই। "

// Api Using Node/Express    
var express = require('express');
var app = express();
var contractors = [
    {   
     "id": "1", 
        "name": "Joe Blogg",
        "Weeks": 3,
        "Photo": "1.png"
    }
];

app.use(express.bodyParser());

app.get('/', function(req, res) {
  res.json(contractors);
});
app.listen(process.env.PORT || 3000);
console.log('Server is running on Port 3000')

কৌণিক কোড

angular.module('contractorsApp', [])
.controller('ContractorsCtrl', function($scope, $http,$routeParams) {

   $http.get('localhost:3000').then(function(response) {
       var data = response.data;
       $scope.contractors = data;
   })

এইচটিএমএল

<body ng-app="contractorsApp">
    <div ng-controller="ContractorsCtrl"> 
        <ul>
            <li ng-repeat="person in contractors">{{person.name}}</li>
        </ul>
    </div>
</body>

উত্তর:


621

আপনার মিডলওয়্যারটি আপনার নোডজেএস / এক্সপ্রেস অ্যাপে যুক্ত করার চেষ্টা করুন (আমি আপনার সুবিধার্থে কিছু মন্তব্য যুক্ত করেছি):

// Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

আশা করি এইটি কাজ করবে!


2
আপনি কোথায় যেতে পারেন তা নির্দিষ্ট করতে সহায়তা করতে পারেন? আমার সার্ভারে নিম্নলিখিত কোড রয়েছে। এর পরে কি ঠিক চলে? var অ্যাপ = প্রয়োজন ('এক্সপ্রেস') (), সার্ভার = প্রয়োজন ('HTTP') create তৈরি করুন সার্ভার (অ্যাপ), আইও = প্রয়োজন ('সকেট.ইও') listen শুনুন (সার্ভার), অনুরোধ = প্রয়োজনীয় ("অনুরোধ") , url = প্রয়োজনীয় ("url"); server.listen (6969); // এটা এখানে যায়? নতুন লাইনে?
আর্ট জিগেল

1
@ জাভান্দেমো আমাকে কি অ্যাপ.জেট ('/', ফাংশন (রেক, রেস) পরিবর্তন করতে হবে ... ফাংশন (রেক, রেজ, পরবর্তী)?
সংগ্রাম সিং

10
আপনি এখনই আমার প্রিয় ব্যক্তি। ধন্যবাদ. আমার মতো নুবুকের জন্য রুটগুলি সংজ্ঞায়িত করার আগে এই কোডটি ঘটতে হবে কি আমরা একটি নোট যুক্ত করতে পারি?
জিজিলাম

1
অনুরোধ মডিউলটি ব্যবহার করার সময় এই কাজটি কীভাবে করবেন?
রোহিত তিগগা

2
এটি আমার ক্ষেত্রে কার্যকর হয়নি। তবুও এই ত্রুটিটি পাওয়া যাচ্ছে: "প্রিফলাইট অনুরোধের প্রতিক্রিয়া অ্যাক্সেস নিয়ন্ত্রণ চেকটি পাস করে না: অনুরোধকৃত উত্সটিতে কোনও 'অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-উত্স' শিরোনাম উপস্থিত নেই Orig উত্স ' abc.xyz.net पात्र 12 ' সুতরাং অনুমোদিত নয় অ্যাক্সেস। প্রতিক্রিয়াটির HTTP স্থিতি কোড ছিল 500. "
user1451111

96

গৃহীত উত্তর, জরিমানা যদি আপনি কিছু খাটো চান, তবে আপনি একটি প্লাগইন নামক ব্যবহার করতে পারেন Cors Express.js জন্য উপলব্ধ

এই বিশেষ ক্ষেত্রে এটি ব্যবহার করা সহজ:

var cors = require('cors');

// use it before all route definitions
app.use(cors({origin: 'http://localhost:8888'}));

3
আমাকে {origin: 'null'}এটির কাজ করার জন্য ব্যবহার করতে হয়েছিল ... স্পষ্টতই, আমার ব্রাউজারটি nullউত্স হিসাবে প্রেরণ করে?
রিকার্ডো ক্রুজ 11

2
চাকা পুনরুদ্ধার কেন। কোড স্নিপেটের তুলনায় আমি সর্বদা প্যাকেজযুক্ত সমাধানের জন্য থাকি
পিয়েরে

মিষ্টি লিটল লাইব্রেরি যা আমার উত্স থেকে বিভিন্ন উত্স থেকে ভিন্ন পদ্ধতি চাইবার ক্ষেত্রে ব্যবহারের ব্যবহারটি বেশ সুন্দরভাবে পরিচালনা করেছিল ... এবং পরের লোকটির দিকে তাকানোর জন্য কোডের ক্লান্তি কম।
কাইল বেকার

6
ধন্যবাদ, সক্ষম কর্সapp.use(cors({origin: '*'})); হিসাবে আমার জন্য কাজ করেছেন ।
ড্যানিয়ালিক

2
এনপিএম কর্স পৃষ্ঠাটি এর আরও ভালভাবে ব্যবহার করার জন্য আমি একবার দেখার পরামর্শ দিই । এটি আমার জন্য বিষয়গুলি খুব পরিষ্কার করে দিয়েছে =)।
13013SwagR

30

অন্য উপায়টি হল, কেবল আপনার রুটে শিরোনামগুলি যুক্ত করা:

router.get('/', function(req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); // If needed
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); // If needed
    res.setHeader('Access-Control-Allow-Credentials', true); // If needed

    res.send('cors problem fixed:)');
});


17

শীর্ষ উত্তর আমার জন্য জরিমানা কাজ ছাড়া যে আমি পরিচ্ছন্ন তালিকা একটির বেশি ডোমেইন করার প্রয়োজন ছিল।

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

আমি allowed_originsএক্সপ্রেস কনফিগারেশনের মতো শ্বেত তালিকাভুক্ত ডোমেনগুলি সঞ্চয় করি এবং originশিরোনাম অনুযায়ী সঠিক ডোমেন রাখি যেহেতু Access-Control-Allow-Originএকাধিক ডোমেন নির্দিষ্ট করার অনুমতি দেয় না।

আমি এখানে যা শেষ করেছি তা এখানে:

var _ = require('underscore');

function allowCrossDomain(req, res, next) {
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

  var origin = req.headers.origin;
  if (_.contains(app.get('allowed_origins'), origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }

  if (req.method === 'OPTIONS') {
    res.send(200);
  } else {
    next();
  }
}

app.configure(function () {
  app.use(express.logger());
  app.use(express.bodyParser());
  app.use(allowCrossDomain);
});

এটি কি একই 'যদি (app.get (' অনুমোদিত উত্স ') থাকে index
রুন জেপ্পেসেন

13

উত্তর কোডটি কেবল লোকালহোস্টের জন্য অনুমতি দেয়: 8888। এই কোডটি উত্পাদন, বা বিভিন্ন সার্ভার এবং পোর্ট নাম স্থাপন করা যাবে না।

এটি সমস্ত উত্সের জন্য কাজ করতে, পরিবর্তে এটি ব্যবহার করুন:

// Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

2
এটি আমার পক্ষে কাজ করে না! "* একটি বৈধ উত্স নয়"। দেখে মনে হচ্ছে * অক্ষরটি ওয়াইল্ডকার্ড হিসাবে স্বীকৃত নয়।
ফ্রান্সেস্কো

এটা আমার জন্য কাজ করে. অর্থাত্ ওয়াইল্ড কার্ড '*' ব্যবহার করা। ক্রোম এবং সাফারি উভয়ের জন্য কাজ করে।
অ্যানবিসউ

ধন্যবাদ;) দুর্দান্ত কাজ করে
মাউরো

9

আপনার প্রকল্পে কর নির্ভরতা ইনস্টল করুন:

npm i --save cors

আপনার সার্ভারের কনফিগারেশন ফাইলটিতে নিম্নলিখিতটি যুক্ত করুন:

var cors = require('cors');
app.use(cors());

এটি আমার জন্য ২.৮.৪ কর্স সংস্করণ সহ কাজ করে।


"cors": "^2.8.5", "express": "^4.16.3",ঠিক @ মোণিকাজা প্রস্তাবিত লাইনের সাথে ঠিকঠাক কাজ করে। ধন্যবাদ!
রামিরোআইসব্যাক

এটি যা করে তা হ'ল সমস্ত উত্স / ডোমেনগুলি অ্যাপ্লিকেশনটিতে অ্যাক্সেস করতে সক্ষম করা যা এমন কিছু যা আপনি সাধারণত না করতে চান। পরিবর্তে কেবল অনুমোদিত ডোমেনগুলি নির্দিষ্ট করুন।
লাচো তোমভ

7

এটি আমার পক্ষে কাজ করেছে।

app.get('/', function (req, res) {

    res.header("Access-Control-Allow-Origin", "*");
    res.send('hello world')
})

আপনার প্রয়োজন অনুসারে আপনি * পরিবর্তন করতে পারেন। আশা করি এটি সাহায্য করতে পারে।


7

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

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

এটি আপনার সমস্ত অনুরোধে সিওআরএস শিরোনামকে সক্ষম করবে। আরও তথ্যের জন্য আপনি কর্স ডকুমেন্টেশন উল্লেখ করতে পারেন

https://www.npmjs.com/package/cors


3
app.all('*', function(req, res,next) {
    /**
     * Response settings
     * @type {Object}
     */
    var responseSettings = {
        "AccessControlAllowOrigin": req.headers.origin,
        "AccessControlAllowHeaders": "Content-Type,X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5,  Date, X-Api-Version, X-File-Name",
        "AccessControlAllowMethods": "POST, GET, PUT, DELETE, OPTIONS",
        "AccessControlAllowCredentials": true
    };

    /**
     * Headers
     */
    res.header("Access-Control-Allow-Credentials", responseSettings.AccessControlAllowCredentials);
    res.header("Access-Control-Allow-Origin",  responseSettings.AccessControlAllowOrigin);
    res.header("Access-Control-Allow-Headers", (req.headers['access-control-request-headers']) ? req.headers['access-control-request-headers'] : "x-requested-with");
    res.header("Access-Control-Allow-Methods", (req.headers['access-control-request-method']) ? req.headers['access-control-request-method'] : responseSettings.AccessControlAllowMethods);

    if ('OPTIONS' == req.method) {
        res.send(200);
    }
    else {
        next();
    }


});

2

কৌণিক 6 বা অন্য কোনও ফ্রেমওয়ার্কে "অ্যাক্সেস-কন্ট্রোল-অরিজিন-অরিজিন" ত্রুটি এড়াতে NODEJ রেফুল এপি-র অ্যাপ্লিকেশনগুলিতে নিম্নলিখিত কোড যুক্ত করুন

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

var cors = require('cors');
var bodyParser = require('body-parser');

//enables cors
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

1

আপনি "$ http.jsonp" ব্যবহার করতে পারেন

অথবা

নীচে স্থানীয় পরীক্ষার জন্য ক্রোমের চারপাশের কাজ রয়েছে

নিম্নলিখিত ক্রমানুসারে আপনার ক্রোমটি খুলতে হবে। (উইন্ডো + আর টিপুন)

Chrome.exe --allow-file-access-from-files

দ্রষ্টব্য: আপনার ক্রোমটি অবশ্যই খোলা হবে না। আপনি যখন এই কমান্ডটি চালাবেন ক্রোম স্বয়ংক্রিয়ভাবে খুলে যাবে।

আপনি যদি কমান্ড প্রম্পটে এই কমান্ডটি প্রবেশ করান তবে আপনার ক্রোম ইনস্টলেশন ডিরেক্টরি নির্বাচন করুন এবং এই আদেশটি ব্যবহার করুন।

ম্যাকের ওপেন ক্রোমের জন্য স্ক্রিপ্ট কোডের নীচে "ফাইল থেকে ফাইল-অ্যাক্সেস-থেকে ফাইল"

set chromePath to POSIX path of "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" 
set switch to " --allow-file-access-from-files"
do shell script (quoted form of chromePath) & switch & " > /dev/null 2>&1 &"

দ্বিতীয় বিকল্প

পতাকাগুলি যুক্ত করতে আপনি খালি (1) ব্যবহার করতে পারেন : ওপেন -a 'গুগল ক্রোম' --আরগস - ফাইল-থেকে-ফাইল-অ্যাক্সেস-থেকে


কিভাবে ম্যাক সম্পর্কে ?? Chrome.exe - ফাইল-অ্যাক্সেস-থেকে ফাইলগুলি
ব্যবহারকারী 1336103

/ আবেদনগুলি / গুগল \ Chrome.app/Contents/MacOS/Google \ ক্রোম --allow ফাইল অ্যাক্সেস-থেকে-ফাইল Chrome খুলুন পরিচালনা কিন্তু বার্তা এখনও দেখানো হয় "XMLHttpRequest- এর লোড করতে পারব না স্থানীয় হোস্ট: 3000 । আদি localhost: 8888 হয় অ্যাক্সেস-নিয়ন্ত্রণ-মঞ্জুরি-উত্স দ্বারা অনুমোদিত নয় ""
ব্যবহারকারী 1336103

+1 আমি 'ওপেন' ব্যবহার করে ম্যাক বিকল্পের সাথে এটি কাজ করে তা নিশ্চিত করতে পারি। আমার কেসটি অন্যরকম, কারণ আমি কেবলমাত্র একটি সম্পূর্ণ ডাউনলোড করা সাইট যা কিছু স্থানীয় JSON ফাইল অ্যাক্সেস করে তা পরীক্ষা করছি testing
spong

0

/**
 * Allow cross origin to access our /public directory from any site.
 * Make sure this header option is defined before defining of static path to /public directory
 */
expressApp.use('/public',function(req, res, next) {
    res.setHeader("Access-Control-Allow-Origin", "*");
    // Request headers you wish to allow
    res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    // Set to true if you need the website to include cookies in the requests sent
    res.setHeader('Access-Control-Allow-Credentials', true);
    // Pass to next layer of middleware
    next();
});


/**
 * Server is about set up. Now track for css/js/images request from the 
 * browser directly. Send static resources from "./public" directory. 
 */
expressApp.use('/public', express.static(path.join(__dirname, 'public')));
If you want to set Access-Control-Allow-Origin to a specific static directory you can set the following.

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.