[解決済み】「アクセス制御-許可-オリジン」がない - Node / Apacheのポートの問題
2022-03-27 06:04:57
質問
Node/Expressを使って小さなAPIを作成し、Angularjsを使ってデータを取り込もうとしていますが、私のhtmlページはapacheの下でlocalhost:8888で実行され、node APIはポート3000でリスンしているので、「アクセス制御-許可-オリジン」なしが表示されます。そこで
node-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.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>
解決方法は？
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();
});
お役に立てれば幸いです。
関連
-
[解決済み] ブラウザで動作しているURLで「connect ETIMEDOUT」エラーが発生する原因は何ですか？
-
[解決済み] Access-Control-Allow-Originヘッダーはどのように機能するのですか？
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか？
-
[解決済み] Access-Control-Allow-Origin複数オリジンのドメイン？
-
[解決済み] REST APIからデータを取得しようとしたときに、要求されたリソースに'Access-Control-Allow-Origin'ヘッダーが存在しない。
-
[解決済み] OPTIONSルートにCORSヘッダを追加しても、ブラウザが私のAPIにアクセスできないのはなぜですか？
-
[解決済み] file:// URLから実行されるアプリケーションのリクエストで、"Origin null is not allowed by Access-Control-Allow-Origin" エラーが発生する。
-
[解決済み] CORSです。資格情報フラグが true の場合、Access-Control-Allow-Origin でワイルドカードを使用できない。
-
[解決済み] アクセス制御-許可-起源のワイルドカードサブドメイン、ポート、プロトコル
-
[解決済み】Access-Control-Allow-OriginでOriginが許可されない。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】 console.logの出力をどこに永久保存するか？
-
[解決済み】Google spreadsheet api Requestに不十分な認証スコープがあった。
-
[解決済み】「npm install」と「npm rebuild」の違いとは？
-
[解決済み】AWS lambda function エラー - モジュール 'index' をインポートできません。エラー
-
[解決済み] ExpressJS : res.redirect()が期待通りに動作しない？
-
[解決済み] ノードマータ予期せぬフィールド
-
[解決済み] Express.js req.bodyが未定義です。
-
[解決済み] npm not able to find a fileに関連するエラーは何が原因でしょうか？node_modules サブフォルダ内にコンテンツがありません。なぜでしょうか？
-
[解決済み] AxiosにCORSの問題が発生
-
[解決済み] REST APIからデータを取得しようとしたときに、要求されたリソースに'Access-Control-Allow-Origin'ヘッダーが存在しない。