여전히 안되서 크롬 확장 프로그램으로 임시적으로 막았어요,,
ejs파일에서 api 호출을 저렇게 해도 되나요??
server.js ----------------------------------------------
const express = require('express');
const cors = require('cors');
const app = express();
const bodyParser= require('body-parser');
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(bodyParser.urlencoded({extended: true}));
app.set(' engine', 'ejs');
app.listen(8080, function(){
console.log('listening on 8080');
});
app.get('/', function(req, res){
res.render(__dirname + '/views/index.ejs');
});
app.get('/main', function(req, res){
res.header("Access-Control-Allow-Origin", "*");
res.render(__dirname + '/views/main.ejs');
});
----------------------------------------------------------------------
main.ejs -----------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<style>
.form-control{
width : 50%;
display : inline;
}
</style>
<title>Document</title>
</head>
<body>
<h4 class="container mt-4"><strong>title</strong></h4>
<div class="container">
<div class="col-2"></div>
<div class="container mt-3">
<form>
<div class="form-group">
<label>출발지</label>
<input type="text" class="form-control">
</div>
<div id="stopOverAppendSpot" class="form-group">
<label>목적지</label>
<input type="text" class="form-control">
</div>
<button type="button" id="addStopOver" class="btn btn-outline-secondary">경유지 추가</button>
<button type="button" id="excel" class="btn btn-outline-secondary">Excel</button>
</form>
<br><br><br>
</div>
<h4 id="opinetInfo-title">오늘의 유가</h4>
<div>
<table class="table">
<thead>
<tr>
<th>유종</th>
<th>가격</th>
<th>차이</th>
</tr>
</thead>
<tbody class="opinetInfo-today">
</tbody>
</table>
</div>
<div class="col-2"></div>
</div>
</body>
</html>
<script>
let oilInfo;
let stopOverCnt = 0;
$().ready(function(){
//유가정보 가져오기
var promise = new Promise(function(){
fetch("http://www.opinet.co.kr/api/avgAllPrice.do?out=json&code=F220512145", { dataType:'json',header : {'Content-Type': 'application/json', 'Accept': 'application/json'}})
.then(function(response){
return response.json();
})
.then(function(json){
oilInfo = json.RESULT.OIL;
var renderStr="";
document.getElementById("opinetInfo-title").innerHTML += '(' + oilInfo[0].TRADE_DT + ')';
for(var i = 0; i< 5; i++){
if(oilInfo[i].PRODNM == "실내등유") continue;
renderStr += `<tr>
<td>${oilInfo[i].PRODNM}</td>
<td>${oilInfo[i].PRICE}</td>
<td>${oilInfo[i].DIFF}</td>
</tr>`
}
$(".opinetInfo-today").append(renderStr);
})
.catch(function(){
console.log("error");
});
})
$("#addStopOver").click(function(){
stopOverCnt++;
var appendStr = "";
appendStr += ` <div class="form-group">
<label>경유지${stopOverCnt}</label>
<input type="text" id="stopOver${stopOverCnt}"class="form-control" style="width:50%; display:inline">
<button type="button" id="remove()" class="btn btn-danger">삭제</button>
</div>`;
$("#stopOverAppendSpot").before(appendStr);
function remove(){
console.log(this)
}
});
});
</script>
---------------------------------------------------------------------------
