아파치 서버에 대한 앵귤러 http 요청

Question

외부 서버에서 api를 요청해야하는 Angular 2 앱을 개발하고 로컬 Apache 서버에도 요청합니다. 외부 API는 jsonp로 요청되어 잘 작동합니다. 로컬/내부 서버의 경우 http 모듈을 사용하려고합니다. 두 응용 프로그램이 동일한 서버에서 실행되기 때문입니다.

Angular는 포트 3000에서 실행되고 Apache는 포트 80에서 실행됩니다. (예 :/some/path) 경로 만 설정하면 Angular는 해당 부분이없는 곳에 포트 3000을 요청합니다. 찾을 수 있습니다. 그래서 전체 주소 (http://localhost/some/path)를 설정했으나 교차 원점 요청으로 감지되어 허용되지 않습니다.

XMLHttpRequest cannot load http://localhost/gizmo/default-questions/get. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. 

어떻게 모두가 그렇지 않은 문제가 될 것이다 구축 할 때 나는 그것을하지 않습니다, 미래에 생각하는 일반 HTTP 포트가 80이 될 것이다 각도 말할 수 있을까? 그러나 나는 모든 수정을 위해 그것을 만들고 대체하고 싶지 않습니다. 이것이 가능한가?

Answer 1

CORS 문제를 피하려면 서버에서 요청을 다시 작성해야합니다.

core.gulp.task(TASK,() => { 
    core.browserSync.init({ 
    port: core.config.browserSyncPort, 
    server: { 
     baseDir: (core.config.getMode() === 'start') ? ['.', 'build'] : ['build'], 
     middleware: [ 
     rewrite([ 
      '^/api/(.*)$ ' + core.config.apiPhp + '/$1 [P]', 
      '^/es/(.*)$ ' + core.config.esPhp + '/$1 [P]', 
      '^[^\\.]*$ /index.html [L]' 
     ]) 
     ] 
    }, 
    open: false 
    }); 
    core.browserSync.emitter.on('init',() => { 
    // TODO: Should reload be here or inside timeout? 
    core.browserSync.reload(); 
    setTimeout(() => { 
     let link = core.link(`http://localhost:${core.config.browserSyncPort}`); 
     core.mainHeading(TASK, `CTRL CLICK to open ${link}`); 
    }, 1000); 
    }); 
}); 

Apache 및 NGINX에서도 비슷한 내용을 다시 작성할 수 있습니다. CORS는 브라우저에서만 실행됩니다.