質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Q&A

解決済

1回答

1997閲覧

No 'Access-Control-Allow-Origin' header is present on the requested resource.

aiai8976

総合スコア112

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

0グッド

0クリップ

投稿2019/08/15 01:41

編集2019/08/15 02:15

前提・実現したいこと

Node.jsをwebサーバとしてクライアントからリクエストがあれば必要なファイルを返すという処理を実装しています。
そのときに以下のようなエラーが発生しました。
Cross Policyに関するエラーで、リクエストのヘッダーに"Access-Control-Allow-Origin"をつけろと言われていると思ってそのようにしましたが、エラーはかわらないままです。
何か解決策がありましたら、コメントお願いします。

発生している問題・エラーメッセージ

Access to XMLHttpRequest at 'http://***/get_value' from origin 'http:/***' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

該当のソースコード

該当しているのは、getvalueのところです。

webServer.js(Node)

// 必要なファイルを読み込み var http = require('http'); var url = require('url'); var fs = require('fs'); var server = http.createServer(); // http.createServerがrequestされたら、(イベントハンドラ) server.on('request', function (req, res) { // Responseオブジェクトを作成し、その中に必要な処理を書いていき、条件によって対応させる var Response = { "renderHTML": function () { var template = fs.readFile('./template/index.html', 'utf-8', function (err, data) { // HTTPレスポンスヘッダを出力する res.writeHead(200, { 'content-Type': 'text/html' }); // HTTPレスポンスボディを出力する res.write(data); res.end(); }); }, "getThree": function () { var template = fs.readFile('./js/three.js-master/build/three.min.js', 'utf-8', function (err, data) { // HTTPレスポンスヘッダを出力する res.writeHead(200, { 'content-Type': 'text/javascript' }); // HTTPレスポンスボディを出力する res.write(data); res.end(); }); }, "getOrbit": function () { var template = fs.readFile('./js/OrbitControls.js', 'utf-8', function (err, data) { // HTTPレスポンスヘッダを出力する res.writeHead(200, { 'content-Type': 'text/javascript' }); // HTTPレスポンスボディを出力する res.write(data); res.end(); }); }, "getValue": function () { const MongoClient = require('mongodb').MongoClient; const assert = require('assert'); // Connection URL const url = 'mongodb://localhost:27017'; // Database Name const dbName = 'study'; //結果 var value; const client = new MongoClient(url,{useNewUrlParser: true}); // Use connect method to connect to the server client.connect(function(err) { assert.equal(null, err); console.log("Connected correctly to server"); const db = client.db(dbName); findDocuments(db, function() { client.close(); }); }); const findDocuments = function(db, callback) { console.log("OK"); // Get the documents collection const collection = db.collection('user'); // Find some documents collection.find({}).toArray(function(err, docs) { assert.equal(err, null); console.log("Found the following records"); //for (var document of docs) { //console.log("Found the following records"); //console.log(document[dist]); //console.log(document[rot]); //result=push(document.dist); //result=push(document.rot); //} value = docs console.log(docs); callback(docs); }); } // HTTPレスポンスヘッダを出力する res.writeHead(200, { 'content-Type': 'text/html', 'Access-Control-Allow-Origin': '*' }); console.log("レスポンス"); //console.log(result); // HTTPレスポンスボディを出力する res.write(value); res.end(); } }; // urlのpathをuriに代入 var uri = url.parse(req.url).pathname; console.log(uri); // URIで行う処理を分岐させる if (uri === "/") { // URLが「http://localhost:8080/」の場合、"renderHTML"の処理を行う Response["renderHTML"](); return; } else if (uri === "/js/three.js-master/build/three.min.js") { // URLが「http://localhost:8080/js/three.js-master/build/three.min.js」の場合、"getThree"の処理を行う Response["getThree"](); return; } else if (uri === "/js/OrbitControls.js") { // URLが「http://localhost:8080/js/OrbitControls.js」の場合、"getOrbit"の処理を行う Response["getOrbit"](); return; } else if (uri === "/get_value") { // URLが「http://localhost:8080/get_value」の場合、"getThree"の処理を行う Response["getValue"](); return; }; }); // 指定されたポート(8080)でコネクションの受け入れを開始する server.listen(1234); console.log('Server running at http://localhost:80/');

index.html

<html> <head> <script type="text/javascript" src="js/three.js-master/build/three.min.js"></script> <script type="text/javascript" src="js/OrbitControls.js"></script> </head> <body> <div id="WebGL-area"></div> <script type="text/javascript"> function getValue() { //promiseを使うことで簡潔に記述できる return new Promise((resolve, reject) => { //resolveまたはrejectの結果を返す var req = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成、サーバと非同期通信するためのAPI //req.open("get", "http://192.168.50.226:80/get_value", false); // アクセスするファイルを指定、falseは同期処理 req.open("get", "http://192.168.100.113:80/get_value", false); req.setRequestHeader("Access-Control-Allow-Origin", "*"); //受信が成功した時に呼び出されるイベント req.onload = () => { //通信が正常に終了したかを確認する if (req.readyState === 4 && req.status === 200) { resolve(req.responseType); } else { alert(req.status); reject(new Error(req.statusText)); } }; //受信が失敗した時に呼び出されるイベント req.onerror = () => { reject(new Error(req.statusText)); }; req.send(null); // HTTPリクエストの発行 }); } async function init() { var scene = new THREE.Scene(); var renderer = new THREE.WebGLRenderer(); renderer.setSize(900, 600); document.getElementById("WebGL-area").appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(45, 1.5, 0.1, 1000); camera.position.set(30, 45, 30); camera.lookAt(scene.position); var controls = new THREE.OrbitControls(camera); controls.autoRotate = true; //自動周回 // 座標軸を表示 var axes = new THREE.AxisHelper(100); scene.add(axes); //形状オブジェクトの宣言と生成 var geometry= new THREE.Geometry(); var value; var dis=[]; var rot=[]; //dis,rot = await getCSV(); value = await getValue(); dis=value.dist; rot=value.rot; //dis=value.slice(0,2000); //rot=value.slice(2001,4000); //alert(dis[0]); //alert(rot[0]); //alert(dis); //alert(rot); // for(var i=0;i<1000;i++){ // geometry.vertices[i]= new THREE.Vector3((data[i][0] * Math.cos( data[i][1] * (Math.PI / 180) ))/2, // 0, // (data[i][0] * Math.sin( data[i][1] * (Math.PI / 180) ))/2); // } for(var i=0;i<2000;i++){ var x=(dis[i] * Math.cos( rot[i] * (Math.PI / 180) ))/2; var y=(dis[i] * Math.sin( rot[i] * (Math.PI / 180) ))/2; //alert(x); //alert(y); geometry.vertices[i]= new THREE.Vector3(x,0,y); } //材質オブジェクトの宣言と生成 var material=new THREE.ParticleBasicMaterial({color: 0xFF0000, size: 10.0}); //点オブジェクトの生成 var particles = new THREE.ParticleSystem(geometry,material); //点オブジェクトのシーンへの追加 scene.add(particles); render(); function render() { controls.update(); requestAnimationFrame(render); renderer.render(scene, camera); } } window.onload = init </script> </body> </html>

エラーから以下を追加しましたが、変わりませんでした。

req.setRequestHeader("Access-Control-Allow-Origin", "*");

補足情報(FW/ツールのバージョンなど)

os:ubuntu

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

y_waiwai

2019/08/15 01:43

エラーメッセージを手を加えないでそのまま提示しましょう
aiai8976

2019/08/15 01:50

一応手を加えていないつもりですが、、 どの部分でしょうか。
guest

回答1

0

自己解決

ポート番号が間違えていました。
凡ミスです。

投稿2019/08/15 02:14

aiai8976

総合スコア112

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問