개발자의 오르막
[Node.js]cors header 'access-control-allow-origin' missing 본문
Node.js 를 통한 Ajax 를 실행시키던 중
cors header 'access-control-allow-origin' missing 이란 에러가 났다.
찾아보니, firefox 가 너무 옛날버전(45.0) 이길래, Update도 안되길래 Window 환경에서
다시 express 프로젝트를 처음부터 다시 했다..
그런데 왠걸.. 똑같은 에러가 발생했다!!
form.html:1 Access to XMLHttpRequest at 'http://127.0.0.1:3000/ajax_send_email' from origin 'http://localhost:3000' 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.
http://guswnsxodlf.github.io/enable-CORS-on-express
- 진짜 가뭄의 단비같은 존재다.. 너무 정리가 잘되있었다..
밑의 내용은 위 사이트의 내용을 토대로 작성되었습니다!
# CORS란 무엇인가?
- CORS란 Cross Origin Resource Sharing의 약자로, 현재 도메인과 다른 도메인으로 리소스가 요청될
경우를 말한다. 나의 프로젝트에서는 localhost:3000/form.html 에서 localhost:3000/ajax_email_send 로
url 이 변경되는 경우를 의미한다. (AJAX 로 하나의 홈페이지에서 정보를 받았을 때 발생했다.)
이런 경우 해당 리소스는 cross-origin HTTP 요청에 의해 요청되고,
보안상의 이유로 브라우저는 CORS를 제한한다.
# Access-Control-Allow-Origin
- 이를 해결하기 위해서는 서버(API 서버)의 응답 헤더를 변경해줘야 한다.
서버의 헤더 중에는 Access-Control-Allow-Origin 프로퍼티가 있는데, CORS를 허용해줄 도메인을
입력하는 곳이다. 모든 곳에서 CORS를 허용하기 위해 *를 입력한다.
Access-Control-Allow-Origin: *
# express 에서 CORS 허용하기
역시 레퍼런스를 참조하는게 가장 좋다...
- https://github.com/expressjs/cors/blob/master/README.md
- 이 레퍼런스를 보고, 주어진 소스를 프로젝트에 맞게 변경시킨다.
- app.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var cors = require('cors')
app.listen(3000, function () {
console.log('CORS-enabled web server listening on port 3000')
})
app.use(express.static('public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extends:true}));
app.use(cors())
app.set('view engine', 'ejs');
app.get('/', function(req, res){
res.sendFile(__dirname + "/public/main.html");
});
app.post('/email_post', function(req, res){
res.render('email.ejs', {'email' : req.body.email});
});
app.post('/ajax_send_email', function(req, res){
console.log(req.body.email);
var responseData = {'result' : 'ok' , 'email' : req.body.email}
res.json(responseData);
});
- 결과창
짜잔!! 구글링 사랑해요.. ㅠㅠ
'Trouble Shouting' 카테고리의 다른 글
Spring Boot + Tyemeleaf + Security Tips (0) | 2019.10.07 |
---|---|
(Node.JS) CSS status cancled -> URL 앞에 / 붙임? (0) | 2019.10.04 |
No message available (SpringBoot - REST-AJAX) (0) | 2019.09.30 |
SLF4J Warning : Class path contains multiple SLF4J bindings. (0) | 2019.09.09 |
SpringBoot-Error (STS 실행무반응) (1) | 2019.09.05 |