前端web部署的服务器和后端提供服务API不在同一个域名下,就会产生跨域问题,在学习Angular的过程中,出现了跨域的问题,我自己整理了一下相关的解决方案,供大家参考。
一、Angular CLI 配置解决
- 在angular 项目的根目录下创建 proxy.config.json 文件,文件内容如下(参考)
{ "/": { "target": "http://localhost:50001/", "secure": false } }
- 修改package.json文件内容如下:
"start": "ng serve --proxy-config proxy.config.json"
- 启动Angular项目时,使用 npm run start 命令启动,不可以使用 ng serve命令
二、修改angular.json serve配置
- 在angular 项目的根目录下创建 proxy.config.json 文件,文件内容如下(参考)
{ "/": { "target": "http://localhost:50001/", "secure": false } }
打开angular.json文件,配置加载代理文件proxy.config.json 找到serve,添加 "proxyConfig":"proxy.config.json",配置内容如下:
"serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "Angular:build", "proxyConfig": "proxy.config.json" }, "configurations": { "production": { "browserTarget": "Angular:build:production" } } }
本人更倾向于第二种解决方案,直接使用 ng serve命令启动项目就可以