1. 서버측 코드
var express = require('express');
var app = express();
var multer = require('multer');
var storage = multer.diskStorage({
destination: function(req, file, cb){
cb(null, 'uploads/');
},
filename: function(req, file, cb){
cb(null, file.originalname);
}
});
var upload = multer({storage : storage});
app.listen(3000, function(){
console.log("Connected 3000 port!!");
});
app.use(express.static('client'));
app.post('/Graph_UI.html', upload.single('JsonFile'), function(req, res){
});
app.get('/', function(req, res){
});
2. 클라이언트 메인페이지 코드
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>Graph UI</title>
<style type="text/css">
body
{
margin: 0px;
}
#box
{
position: relative;
height: auto;
margin: auto;
}
#left
{
position: relative;
width: 20%;
float: left;
}
#right
{
position: relative;
width: 80%;
float: left;
}
</style>
</head>
<body>
<script src="Updater.js"></script> <!-- 파일 불러오기 -->
<script src="ReadJson.js"></script> <!-- JSON 데이터 불러오기 -->
<input type="hidden" id="FileName"></input>
<form action="Graph_UI.html" method="post" enctype="multipart/form-data">
<input type="file" value="파일 선택" name="JsonFile" id="File_Reader"></input>
<input type="submit" onclick="ReadJson();"></input>
</form>
</p>
<form name="form1">
<select size=50 id="Sentences" style="width:90%; height:70%" onclick="Updater(this.value);">
</select>
</form>
</p>
</div>
<br>그래프 자리</br>
</div>
</div>
</body>
</html>
3. JSON파일 불러오는 코드
function ReadJson()
{
var URL, headidx, endidx, senText, filename;
URL = document.getElementById("File_Reader").value;
headidx = URL.lastIndexOf('\\');
endidx = URL.length;
filename = URL.substring(headidx+1, endidx);
document.getElementById("FileName").value = filename;
$.ajax({
crossOrigin: true,
type: "GET",
url: "127.0.0.1:3000/uploads/"+filename,
datatype: "JSON",
success : function(data){
$(data.sentence).each(function(index, value){
console.log(value.text);
var datas = value.text;
var selector = document.getElementById("Sentences");
var op = document.createElement("option");
op.text = datas;
op.value = filename + "." + value.id;
selector.options.add(op);
console.log(op);
});
}
});
};
위 코드를 실행해서 파일을 불러와 서버에 업로드 후 그 파일을 다시 불러오면
XMLHttpRequest cannot load %3127.0.0.1:3000/uploads/aa.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
이런 오류가 나는데 찾아보니 크로스도메인문제라더군요...
해결법이란거 다 해봐도 안되던데 어떻게 해야할까요
글쓰기