Angular CLI中Http请求跨域问题求助：本地运行异常构建后正常

我来帮你拆解这个问题：

首先，你遇到的这个跨域报错完全是浏览器同源策略（Same Origin Policy）导致的，根源在于开发环境下你的Angular应用跑在localhost的某个端口（比如4200），而OpenWeatherMap的API域名是api.openweathermap.org，两者协议、域名、端口三者不全一致，浏览器就会拦截跨域请求——这是浏览器的安全机制，和OpenWeatherMap服务本身关系不大，也不是你的代码有问题。

至于为什么ng build之后请求正常，大概率是因为你把构建后的静态文件部署到了某个服务器上：要么这个服务器和OpenWeatherMap的API域名满足同源要求，要么服务器配置了反向代理/CORS规则，或者OpenWeatherMap的CORS策略允许你部署应用的域名访问，所以浏览器不会拦截。

怎么修复开发环境的跨域问题？ #

Angular CLI自带了代理功能，专门用来解决开发环境的跨域请求，步骤很简单：

• 在你的Angular项目根目录创建一个proxy.conf.json文件，内容如下：

{
  "/api": {
    "target": "http://api.openweathermap.org",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

• 修改你代码里的API请求地址：把原来的http://api.openweathermap.org/data/2.5/forecast?xxx改成/api/data/2.5/forecast?xxx
• 启动开发服务器的时候，带上代理配置参数：

ng serve --proxy-config proxy.conf.json

或者更方便的是，修改angular.json里的配置，在architect > serve > options中添加一行：

"proxyConfig": "proxy.conf.json"

这样之后直接运行ng serve就会自动启用代理了。

原理是Angular的开发服务器会帮你把以/api开头的请求转发到OpenWeatherMap的API服务器，这样浏览器看到的请求是同域的（都是localhost:4200），就不会触发跨域拦截，而实际请求还是发送到了目标API。

内容的提问来源于stack exchange，提问作者Mikael S