web-dev-qa-db-ja.com

Express JS：リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません

サーバー上で実行されているAPIと、それに接続してデータを取得するフロントエンドクライアントがあります。私はクロスドメイン問題についていくつかの調査を行い、それを機能させています。しかし、何が変わったのかわかりません。コンソールにこのエラーが表示されます：

XMLHttpRequestが読み込めません https：//api.mydomain/api/status 。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http://beta.mydomain.com 'はアクセスを許可されません。応答のHTTPステータスコードは502でした。

次のルートファイルがあります。

var express = require('express');
var router = express.Router();
var Assessment = require('../app/models/assessment');

router.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});


router.post('/api/status', function (req, res, next) {
    getStatus.getStatus(req, res, Assessment);
});

module.exports = router;

そして、そのルートへのAjax呼び出しを行う次のJavaScript：

var user = {
    'uid' : '12345'
};
$.ajax({
    data: user,
    method: 'POST',
    url: 'https://api.mydomain/api/status',
    crossDomain: true,
    done: function () {
    },
    success: function (data) {
        console.log(JSON.stringify(data));
    },
    error: function (xhr, status) {

    }
});

私が試してみました：リクエストするドメインを「Access-Control-Allow-Origin」ヘッダーに配置します表現にcorsモジュールを使用するrouter.all関数をミドルウェア内に配置する

要求ドメインはHTTPで、APIドメインはHTTPSです。ただし、HTTPが有効になっているときに動作しました。

「Access-Control-Allow-Origin」ヘッダーが送信されない理由を誰かが洞察していますか？

ありがとうございました

javascriptajaxnode.jsexpresscors
5
Tom

リクエストヘッダーをエクスプレスルートに設定する代わりに、インスタンス自体をこのように表現するように設定してみてください。

var express = require('express');
var app = express();
var Assessment = require('../app/models/assessment');

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

app.post('/api/status', function (req, res, next) {
    // your code goes here
});

module.exports = app;

お役に立てれば！

17
David R

同じためにcors npmを使用することもできます。

**npm i cors**

const cors = require('cors')

var corsOptions = {
  Origin: '*',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204 
}
app.use(cors(corsOptions));

var routes = require('./api/routes/route'); //importing route
routes(app); //register the route
2
M J

server.jsファイルを確認してください。以下の例のようになります。

const express = require('express');
const bodyParser = require('body-parser');
var cors = require('cors');
const mongoose = require('mongoose');
// create express app
const app = express();

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }))

// parse application/json
app.use(bodyParser.json())

app.use(cors());
0
Sanjay Raut