node.js - cross-origin read blocking(corb) blocked cross-origin response with mime type application/json




لا "Access-Control-Allow-Origin"-Node/Apache Port Issue (6)

لقد قمت بإنشاء واجهة برمجة تطبيقات صغيرة باستخدام Node / Express ومحاولة سحب البيانات باستخدام Angularjs ولكن أثناء عمل صفحة html الخاصة بي تحت apache على localhost: 8888 و API node يستمع على المنفذ 3000 ، أحصل على No 'Access-Control- سماح-المنشأ. لقد جربت استخدام عقدة http-proxy و Vhosts Apache ولكن ليس لديك الكثير من النجاح ، يرجى الاطلاع على الخطأ الكامل والرمز أدناه.

"لا يمكن تحميل XMLHttpRequest localhost: 3000. لا يوجد رأس 'Access-Control-Allow-Origin' على المورد المطلوب. لذلك ، لا يسمح باستخدام 'localhost: 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 code
    angular.module('contractorsApp', [])
    .controller('ContractorsCtrl', function($scope, $http,$routeParams) {

   $http.get('localhost:3000').success(function(data) {

    $scope.contractors = data;

   })

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

الإجابة المقبولة على ما يرام ، في حالة كنت تفضل شيئا أقل ، يمكنك استخدام البرنامج المساعد دعا cors المتاحة ل Express.js

إنها سهلة الاستخدام ، في هذه الحالة بالذات:

var cors = require('cors');

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

جرب إضافة الوسيطة التالية إلى تطبيق NodeJS / Express (لقد أضفت بعض التعليقات لراحتك):

// 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();
});

امل ان يساعد!


كان الجواب الأفضل جيدًا بالنسبة لي ، باستثناء أنني احتجت إلى إضافة أكثر من نطاق واحد إلى القائمة البيضاء.

كذلك ، فإن أفضل إجابة تعانى من حقيقة أن طلب OPTIONS لا يتم التعامل معه بواسطة البرامج الوسيطة وأنك لا تحصل عليه تلقائيًا.

أقوم بتخزين نطاقات القائمة البيضاء على أنها allowed_origins في تكوين Express ووضع النطاق الصحيح وفقًا لرأس 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);
});

يسمح رمز الإجابة فقط بـ المضيف المحلي: 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();
});

/**
 * 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.


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();
    }


});