Angular 跨域问题解决方案

前端web部署的服务器和后端提供服务API不在同一个域名下，就会产生跨域问题，在学习Angular的过程中，出现了跨域的问题，我自己整理了一下相关的解决方案，供大家参考。

一、Angular CLI 配置解决

1. 在angular 项目的根目录下创建 proxy.config.json 文件，文件内容如下（参考）                                                                           

   {
   
   "/": {
   
   "target": "http://localhost:50001/",
   
   "secure": false
   
   }
   
   }

    

2. 修改package.json文件内容如下：

   "start": "ng serve --proxy-config proxy.config.json"

    

3. 启动Angular项目时，使用 npm run start 命令启动，不可以使用 ng serve命令

 二、修改angular.json serve配置

1. 在angular 项目的根目录下创建 proxy.config.json 文件，文件内容如下（参考）                                                                           

   {
   
   "/": {
   
   "target": "http://localhost:50001/",
   
   "secure": false
   
   }
   
   }

    

2. 打开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命令启动项目就可以