개발자의 오르막

[Node.js]cors header 'access-control-allow-origin' missing 본문

Trouble Shouting

[Node.js]cors header 'access-control-allow-origin' missing

계단 2019. 10. 1. 22:20

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

 

node.js express에서 CORS 허용하기

CORS란 무엇인가CORS란 Cross Origin Resource Sharing의 약자로, 현재 도메인과 다른 도메인으로 리소스가 요청될 경우를 말한다. 예를 들어, 도메인 http://A.com 에서 읽어온 HTML페이지에서 다른 도메인 http://B.com/image.jpg...

guswnsxodlf.github.io

- 진짜 가뭄의 단비같은 존재다.. 너무 정리가 잘되있었다..

  밑의 내용은 위 사이트의 내용을 토대로 작성되었습니다!

 

# 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

 

expressjs/cors

Node.js CORS middleware. Contribute to expressjs/cors development by creating an account on GitHub.

github.com

- 이 레퍼런스를 보고, 주어진 소스를 프로젝트에 맞게 변경시킨다.

 

- 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);
});

 

- 결과창

짜잔!!  구글링 사랑해요.. ㅠㅠ

 

 

 

Comments