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 { }
相关推荐
群联云防护小杜37 分钟前
基于AI的Web应用防火墙(AppWall)实战:漏洞拦截与威胁情报集成
前端·分布式·安全·ddos
_清浅41 分钟前
JavaScript(JS进阶)
开发语言·前端·javascript·操作系统·html5
葡萄城技术团队1 小时前
如何通过前端表格控件实现自动化报表?1
运维·前端·自动化
CharlesYu011 小时前
vite作者如何评价turbopack
前端·turbopack
小王码农记1 小时前
vue中动态绑定ref后,获取某个具体组件实例
前端·javascript·vue.js
悲且狂2 小时前
vue辅助工具(vue系列二)
前端·javascript·vue.js
牧码岛2 小时前
Web前端之Vue+Element实现表格动态不同列合并多行、localeCompare、forEach、table、push、sort、Map
前端·javascript·elementui·vue·web·web前端
老K(郭云开)2 小时前
如何让eDrawings html文件在Chrome浏览器上展示——allWebPlugin中间件扩展
前端·javascript·chrome·中间件·edge·html
point_zg2 小时前
Vue报错...properly without JavaScript enabled. Please enable it to continue
开发语言·javascript·vue
DCTANT2 小时前
【原创】vue-element-admin-plus完成确认密码功能,并实时获取Form中表单字段中的值
前端·javascript·vue.js·elementui·typescript