nodejs의 http 프록시 라이브러리 http-proxy의 일반적인 문제 분석

이 기사는 nodejs의 http 프록시 라이브러리 http-proxy의 일반적인 문제에 대한 분석을 제공합니다. 이는 특정 참조 값을 가지고 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

http-proxy

http-proxy는 webpack-dev-server에 통합되어 프록시로 사용되는 nodejs http 프록시 라이브러리입니다. 그 이유는 오늘날 프런트엔드와 백엔드 분리가 대중화되면서 호스트 이름을 구성하지 않고 로컬에서 백엔드 API 인터페이스를 조정해야 한다면 필연적으로 도메인 간 요청이 되기 때문입니다. 브라우저의 도메인 간 보안 제한으로 인해 호출이 차단되므로 로컬 개발 환경에서는 로컬 프록시가 필수가 되었습니다.

'/saasapi/*': {
    target: 'http://ebk.17u.cn',
},

saasapi로 시작하는 ajax 요청을 http://ebk.17u.cn으로 리디렉션한다는 뜻입니다http://ebk.17u.cn

本地开发没有问题，线上如果也是用nodejs的服务器，如果恰巧也配置了代理，部署到线上出现了意想不到的问题~

后端nginx配置了反向代理

一个网站主域名是17u.cn，后端如果部署了多个api服务，那这样子他的api服务可能是这样子

主域名	二级域名1	二级域名2	二级域名3
17u.cn	ebk.17u.cn	ebk2.17u.cn	ebk3.17u.cn

前端同样部署了3个nodejs服务，也同样配置了3个代理。部署到线上却发现，请求总是指向第一个二级域名，其他的二级域名访问不到。

百思不得姐！

后来仔细查看http的信息，发现几个服务的ajax请求发到服务器上之后，hostname都是浏览器的域名，而nginx的反向代理配置都是根据hostname来做转发的。因为我们的hostname对于nginx来说都是陌生的，所以就默认转发到默认的第一个服务上去了。

查了http-proxy配置，哈哈，果然有这种修改的配置，只要稍微改一下就好了。

'/saasapi/*': {
    target: 'http://ebk.17u.cn',
    changeOrigin: true
},

changeOrigin: true意思就是把hostname改为和target一致就可以了。这样后端nginx就可以正常转发了。

后端配置了cookie Path

后端api，不仅仅配置了二级域名，还配置了二级目录，前端部署的服务也一样需要二级目录。

api地址就变成这个样子：

ebk.17u.cn/saasapi

前端地址：

trans.17u.cn/saas

代理配置做对应调整

'/saas/saasapi/*': {
    target: 'http://ebk.17u.cn',
    changeOrigin: true,
    rewrite: path => path.replace(/^\/saas\/saasapi\/cxy/, '/saasapi')
},

这样子看起来很正常吧，但是问题出在哪呢？后端把登录之后设置的cookie也设置了path：Path='/saasapi'。

这样子问题就来了，trans.17u.cn/saas当前域名下读取不到/saasapi

로컬 개발에도 문제가 없습니다. 온라인에서 nodejs 서버도 사용한다면, 프록시도 설정했는데 온라인 배포시 예상치 못한 문제가 발생했습니다~

백엔드 nginx가 역방향 프록시로 구성되었습니다

웹사이트의 기본 도메인 이름이 17u.cn인 경우. 백엔드 서비스에 배포된 경우 그의 API 서비스는 다음과 같습니다

기본 도메인 이름	2단계 도메인 이름 1	2차 도메인 이름 2	2차 도메인 이름 3
17u.cn	ebk.17u .cn	ebk2.17u.cn	ebk3.17u.cn

프런트 엔드도 3개의 nodejs를 배포합니다. 서비스도 3개의 프록시로 구성됩니다. 온라인으로 배포한 후 요청은 항상 첫 번째 2차 도메인 이름을 가리키며 다른 2차 도메인 이름에는 액세스할 수 없다는 사실을 발견했습니다.

안타까운 마음을 금할 수 없습니다!

나중에 http 정보를 자세히 확인해 보니 여러 서비스의 ajax 요청이 서버로 전송된 후 호스트 이름이 브라우저의 도메인 이름이고 nginx의 역방향 프록시 구성이 호스트 이름을 기반으로 전달되는 것을 발견했습니다. 우리의 호스트 이름은 nginx에 익숙하지 않기 때문에 기본적으로 기본 첫 번째 서비스로 전달됩니다.

http-proxy 구성을 확인해 보니, 하하, 물론 이렇게 수정된 구성도 있으니 살짝만 변경해 보세요.

cookiePathRewrite: { '/saasapi': '/saas/saasapi' }

changeOrigin: true는 호스트 이름을 대상과 일치하도록 변경한다는 의미입니다. 이런 방식으로 백엔드 nginx가 정상적으로 전달될 수 있습니다.

백엔드는 쿠키 경로로 구성됩니다

백엔드 API는 두 번째 수준 도메인 이름을 구성할 뿐만 아니라 두 번째 수준 디렉터리도 구성합니다. 프런트엔드에 배포된 서비스에는 두 번째 수준도 필요합니다. -레벨 디렉토리.

API 주소는 다음과 같습니다:

cookieDomainRewrite

프런트 엔드 주소:

rrreee프록시 구성을 적절하게 조정하세요rrreee

정상적으로 보일 수 있지만 문제는 어디에 있습니까? 또한 백엔드는 로그인 후 쿠키 세트의 경로(Path='/saasapi')를 설정합니다.

문제가 발생합니다. trans.17u.cn/saas가 현재 도메인 이름 아래의 /saasapi 아래에 있는 쿠키를 읽을 수 없어 매번 프런트엔드 로그인이 통과됩니다. . , 하지만 API를 정상적으로 조정할 수 없습니다. 호출될 때마다 로그인되지 않았다는 메시지가 나타납니다.

궁금한 점이 있으시면 먼저 설명서를 확인해 주세요. 🎜🎜그래도 해결책을 찾았습니다🎜rrreee🎜쿠키 경로를 다시 작성하세요. 마찬가지로 백엔드 인터페이스가 쿠키의 도메인을 지정하는 경우에도 여전히 해결책이 있습니다🎜rrreee🎜사용하기 더 쉬운 다른 재작성이 있습니다. 🎜🎜ps: 문제를 해결하는 과정에서 수정이 항상 실패하는 걸 발견하고, 라이브러리의 버그인가 의심한 적도 있습니다. 나중에 나는 크롬의 쿠키를 지워야 한다는 것을 알았습니다. 🎜🎜애플리케이션 클릭 -> 쿠키: 다음 쿠키는 삭제할 수 없습니다. 모든 쿠키는 삭제할 수 없습니다. 애플리케이션 -> 저장 공간 삭제 및 사이트 데이터 삭제로 이동하세요. 최종 성공🎜🎜관련 권장 사항: 🎜🎜🎜Js의 프런트 엔드 모듈화에 대한 자세한 분석 및 차이점 비교🎜🎜🎜🎜jQuery에서 일반적으로 사용되는 메서드(코드 포함)🎜🎜🎜🎜jQuery 개체 및 네이티브 DOM 객체 간의 차이점과 변환🎜🎜

위 내용은 nodejs의 http 프록시 라이브러리 http-proxy의 일반적인 문제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!