☰

「Access-Control-Allow-Origin」がありません - Node / Apache ポートの問題 質問する

tag-icon • tag-icon node.js angularjs rest express cors
「Access-Control-Allow-Origin」がありません - Node / Apache ポートの問題 質問する

Node/Express を使用して小さな API を作成し、Angularjs を使用してデータを取得しようとしましたが、HTML ページが localhost:8888 の Apache で実行されており、ノード API がポート 3000 でリッスンしているため、「Access-Control-Allow-Origin」が表示されません。Vhosts node-http-proxyApache を使用してみましたが、あまり成功しませんでした。以下の完全なエラーとコードを参照してください。

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コード

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

   $http.get('localhost:3000').then(function(response) {
       var data = response.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>

ベストアンサー1

NodeJS/Express アプリに次のミドルウェアを追加してみてください (便宜上、いくつかコメントを追加しました)。

// Add headers before the routes are defined
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();
});

127.0.0.1(の代わりにを使用する必要があるかもしれませんlocalhost。)

おすすめ記事