grunt-connect-proxy 개발 시 크로스 필드 문제 해결

3271 단어
최근의 프로젝트는 앞뒤가 완전히 분리되어 개발되었고 앞뒤는grunt로 프로젝트를 관리한다.이렇게 하면 하나의 문제를 초래할 수 있다. 개발할 때 전방에서 백엔드 인터페이스를 호출할 때 한 서버에 없기 때문에 크로스 필드 문제가 발생할 수 있다.그러나 JSONP나 CROS 방식으로 진정한 크로스오버를 실현할 수 없다. 왜냐하면 프로젝트가 발표될 때 사실은 같은 서버 아래에 있기 때문이다.
이때 우리의grunt-connect-proxy가 등장했는데 그것이 바로 이 문제를 전문적으로 해결하는 것이다.
구성:
1. 이 구성 요소를 다운로드하여 설치
npm install grunt-connect-proxy --save-dev
주의해야 할 것은: 반드시 미리grunt-contrib-livereload라는 구성 요소를 설치해야 한다. 그렇지 않으면grunt serve는 항상 오류를 보고할 것이다
2. 구성 추가
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
};
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;

이 코드는gruntfile에 추가해야 합니다.js 맨 위, 모듈.exports 위쪽.
그리고 연결에proxy 설정 및livereload 설정을 추가합니다
connect: {
      options: {
        port: 9000,
        open: true,
        livereload: 35729,
        // Change this to '0.0.0.0' to access the server from outside
        hostname: 'localhost'
      },
      proxies: [
                {
                    context: '/website',
                    host: 'www.somesite.com',
                    port: 80,
                    https: false,
                    changeOrigin: true
                }
            ],
      livereload: {
        options: {
          middleware: function (connect) {
                        return [
                            lrSnippet,
                            mountFolder(connect, '.tmp'),
                            connect().use('/bower_components', connect.static('./bower_components')),
                            mountFolder(connect, config.app),
                            proxySnippet,
                        ];
                    }
        }
      },
/***/
}

다음, 이 task에proxy를 추가합니다
grunt.task.run([
      'clean:server',
      'wiredep',
      'concurrent:server',
      'autoprefixer',
      'configureProxies',     // livereload 
      'connect:livereload',
      'watch'
    ]);

 
OK, 여기까지 대리님 추가!
참조:
https://github.com/drewzboto/grunt-connect-proxy
http://fettblog.eu/blog/2013/09/20/using-grunt-connect-proxy/
http://www.himysql.com/2014/07/29/grunt-connect-proxy-configure/
http://www.ngnice.com/posts/76c4bd0f7a4cdc

좋은 웹페이지 즐겨찾기