web-dev-qa-db-ja.com

Node.Jsエラー「リ​​クエストに「Access-Control-Allow-Origin」ヘッダーがありません」

この質問は他の質問と似ています。ただし、動作しない理由を非常に混乱させる違いがあります。

私のJavaScriptは6つのjsonファイルを呼び出していて、すべて正しく機能していました。 Node.JSでは、corsとヘッダーを以下のように設定しています。

var fs = require('fs');
var http = require("https");
var express = require('express');
var app = express();
var path = require('path');
var http = require("http");
var url = require("url");
var req = require('request')
var pem = require('pem');
var cors = require("cors");

app.use(express.static(path.join(__dirname, '../')));

app.listen(process.env.PORT || 8080);

app.options('*', cors()); 

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.all('/posts', function(req, res){
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
});

app.get('/', function (req, res) { 
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    res.writeHead(200, {'Content-Type': 'text/plain'});
    contents = fs.readFileSync("sliderImages.json", "utf8");
    console.log(path.join(__dirname, '/sliderImages.json'));
    res.end(contents);
});

6つのjsonファイルはすべて、絶対URLパスからNode JSによって取得されます。昨日2つ作成しましたが、すべて正常に機能していました。しかし、今日1つ作成して同じ方法で実装し、次のエラー：

要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン 'null'はアクセスを許可されません。

私はそれぞれ同じ方法で実装しています、例：

var base_url = 'http://127.0.0.1:8080';

mainInformationTop();

function mainInformationTop()
{
    $.ajax({
        type: "GET", 
        url: base_url + "/api/topInformation.json", 
        dataType: "json",
        success: function(response)
        {
            var json_obj = response.mainDescription;
            var imagesSlider="";
            var imagesSliderDescription ="";
            for (var i = 0; i< json_obj.length; i++) 
            {

            }

        }
        , 
        error: function(jqXHR, textStatus, errorThrown) {
            alert(jqXHR.status);
        }  
    })    
}

私はjsonファイルが関連しているとは思いませんが、以下は私のjsonファイルです：

{"mainDescription":[
{
"display": "my display",
"description" : "my description"
}
]}

テストのためのforループの情報と、私が追加した情報は関係ないので取り出しました。何らかの理由で失敗し、成功せずにエラーになります。他のすべての呼び出しは同じ方法で設定され、正しく機能します。

javascriptajaxnode.jsexpresscors
5
L1ghtk3ira

これは この答え のはるかに単純なバージョンであり、同じ効果を実現します。

var fs = require('fs');
var express = require('express');
var cors = require('cors');

var app = express();

app.use(cors()); 
app.use(express.static(path.join(__dirname, '../')));

app.get('/', function (req, res) { 
  res.writeHead(200, {'Content-Type': 'text/plain'});
  contents = fs.readFileSync('sliderImages.json', 'utf8');
  res.end(contents);
});

app.listen(process.env.PORT || 8080);
24
Chris Foster

修正しました。

var fs = require('fs');
var http = require("https");
var express = require('express');
var app = express();
var path = require('path');
var http = require("http");
var url = require("url");
var req = require('request')
var pem = require('pem');
var cors = require("cors");

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.use(express.static(path.join(__dirname, '../')));

app.listen(process.env.PORT || 8080);

app.options('*', cors()); 

app.all('/*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://localhost:8080");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header("Access-Control-Allow-Headers", "X-Requested-With,     Content-Type");
    next();
});

app.get('/', function (req, res) { 
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    res.writeHead(200, {'Content-Type': 'text/plain'});
    contents = fs.readFileSync("sliderImages.json", "utf8");
    console.log(path.join(__dirname, '/sliderImages.json'));
    res.end(contents);
 });

コメントが言ったことにもかかわらず、私が変更した唯一の本当のことは、何よりもまずapp.useを移動することでした。これで問題は解決しました。

4
L1ghtk3ira

私もこの問題を抱えています。コードは上記と同じでしたが、コードを開始点に配置したいと考えています。クライアントに応答を送信する前（res.end（））にこのコードを最後に配置しないでください。このコードをどこにでも配置できるようにした3つのメソッド（GET、POST、HEAD）は、他のメソッドについては、これを試して、cors、expressなどの他のモジュールで試してみますが、httpモジュールのみを使用しました

var server=http.createServer(function (req, res) {

res.setHeader("Access-Control-Allow-Origin","*");
res.setHeader("Access-Control-Allow-Methods","PUT,GET,DELETE,PATCH")
res.setHeader('Access-Control-Allow-Credentials', true)
res.setHeader('Access-Control-Allow-Headers','X-Requested-With,content-type,Origin,Accept,Authorization')
// your other code followes
0
Nandha Kumar