Angular 프록시 구성

공식 웹사이트 문서 https://angular.io/guide/build#using-corporate-proxy

【관련 튜토리얼 추천: "angular tutorial"】

왜 할까요?

로컬 개발의 도메인 간 문제를 해결하기 위해 다른 주소에 대한 일치 요청을 프록시하는 프록시 파일을 작성합니다.

구성 방법은 무엇입니까?

루트 디렉터리에proxy.config.js를 생성하세요proxy.config.js
可以在这个文件中做如下配置
在 package.json的运行项目命令中加入--proxy-config proxy.config.js

配置介绍

const PROXY_CONFIG = [ { context: ['/api'], target: 'http://xxx', secure: false, changeOrigin: true, pathRewrite: { '^/api': '', }, }, ]; module.exports = PROXY_CONFIG;

로그인 후 복사

context: 需要匹配的path
target: 代理到的地址
pathRewrite: 将请求的部分path重写，它是一个对象，键是^+要重写的path，值是替换的path。
secure: 安全设置
changeOrigin: 改变源

配置实例

如http://localhost:4208/auth/login

想要代理到

http://www.baidu.com/news/login

可以这样配置

const PROXY_CONFIG = [ { context: ['/auth/login'], target: 'http://www.baidu.com', pathRewrite: { '^/auth/login': '/news/login', }, }, ] module.exports = PROXY_CONFIG;

로그인 후 복사

Q：如果有两个接口，一个`/api/cer/register`,另外一个`/api/cer/login`,我该如何将两个接口代理到不同的地址？

{ context: ['/api/cer/login'], target: 'xxx1', secure: false, changeOrigin: true, }, { context: ['/api'], target: 'xxx2', secure: false, },

로그인 후 복사

使用/api，只要是匹配到这个的都会走它的代理，不过如果在它前面加了个更加精确的/api/cer/login

이 파일에서 다음과 같은 구성을 할 수 있습니다

패키지의 프로젝트 실행 명령에--proxy를 추가하세요. json -config proxy.config.js

구성 소개

rrreee

context: 일치해야 하는 경로 target: pathRewrite로 프록시할 주소: 요청한 부분 경로를 다시 작성합니다. 키는 ^+다시 작성할 경로이고 값은 다음과 같습니다. 교체된 경로. secure: 보안 설정 changeOrigin: 소스 변경

인스턴스 구성 을 http://localhost:4208/auth/login`http://www.baidu.com/news/login`으로 프록시하려는 경우 이렇게 구성할 수 있습니다rrreee

Q: 두 개의 인터페이스가 있는 경우 하나는`/api/cer/register`이고 다른 하나는`/api /cer/login`,두 개의 인터페이스를 서로 다른 주소로 프록시하려면 어떻게 해야 합니까?

rrreee /api를 사용하세요. 이와 일치하는 한 프록시를 통과하지만 앞에 더 정확한 /api/cer/login을 추가하면 그 중이 먼저 일치되고 이 프록시가 사용됩니다. 더 많은 사용법이 github에서 업데이트되었습니다: https://github.com/deepthan/blog-angular더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요: 프로그래밍 소개! !

위 내용은 스캐폴딩을 기반으로 Angular 프록시를 구성하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!