Angular: 配置 proxy 解决跨域

配置 proxy.config.json

typescript 复制代码
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

在 angular.json 中配置 proxy

typescript 复制代码
"serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
       "browserTarget": "min-wyy:build",
       "proxyConfig": "proxy.config.json"
     },
	...
}

service.module.ts

typescript 复制代码
import { isPlatformBrowser } from '@angular/common';
import { InjectionToken, NgModule, PLATFORM_ID } from '@angular/core';
import { httpInterceptorProvides } from './http-interceptors';


export const API_CONFIG = new InjectionToken('ApiConfigToken');
export const WINDOW = new InjectionToken('WindowToken');


@NgModule({
  declarations: [],
  imports: [
    
  ],
  providers: [
    {
      provide: API_CONFIG,
      useValue: '/api/' // useValue: 'http://localhost:3000/'
    },
    ...
  ]
})
export class ServicesModule { }
相关推荐
CodeBlossom11 分钟前
javaweb -html -CSS
前端·javascript·html
CodeCraft Studio12 分钟前
【案例分享】如何借助JS UI组件库DHTMLX Suite构建高效物联网IIoT平台
javascript·物联网·ui
打小就很皮...44 分钟前
HBuilder 发行Android(apk包)全流程指南
前端·javascript·微信小程序
集成显卡2 小时前
PlayWright | 初识微软出品的 WEB 应用自动化测试框架
前端·chrome·测试工具·microsoft·自动化·edge浏览器
前端小趴菜053 小时前
React - 组件通信
前端·react.js·前端框架
Amy_cx3 小时前
在表单输入框按回车页面刷新的问题
前端·elementui
dancing9993 小时前
cocos3.X的oops框架oops-plugin-excel-to-json改进兼容多表单导出功能
前端·javascript·typescript·游戏程序
后海 0_o4 小时前
2025前端微服务 - 无界 的实战应用
前端·微服务·架构
Scabbards_4 小时前
CPT304-2425-S2-Software Engineering II
前端
小满zs4 小时前
Zustand 第二章(状态处理)
前端·react.js