스캐폴딩을 기반으로 Angular 프록시를 구성하는 방법에 대한 간략한 분석

이 글에서는 스캐폴딩을 기반으로 Angular 프록시(프록시)를 구성하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!