问题描述

某小白是一个只略懂基础三件套和 Angular 框架的前端初学者，这天，小白开始尝试和后端服务器对接，控制台却打印出了如下错误信息：

小白看得一头雾水，ta 赶忙搜索与has been blocked by CORS policy: No 'Access-Control-Allow-Origin'相关的解释，这才逐渐明白过来。原来，浏览器的安全策略中存在一个同源策略，这个策略要求浏览器的 ajax 只能访问跟它的 HTML 页面同源（相同域名或IP）的资源，而小白的本地测试环境显然与后端服务器不同源，访问属于跨域访问，因此被拒绝。

跨域问题的解决方案有多种，但小白主动把锅揽到了自己身上，选择在前端解决该问题。

解决方案

反向代理——设置一个代理服务器（不需要真实存在），使该代理和后端服务器同源，客户端的请求由该代理转发，这样就不存在跨域了。
在 Angular 下反向代理的配置流程如下：

1. 在项目根目录下创建proxy.config.json，内容如下：

{
  "/api/*": {
    "target": "http://xxx.xxx.xxx.xxx:8080",
    "secure": true,
    "changeOrigin": true,
    "cookieDomainRewrite": "",
    "pathRewrite": {
      "^/": ""
    }
  }
}

注："target"指向的是需要跨域的服务器地址，最终到达后端服务器的请求会变成类似"http://xxx.xxx.xxx.xxx:8080/api/…"的请求，这是很多博客没有讲明白的。

2. 在angular.json中找到"serve"这一项，增加"proxyConfig"条目：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "project-front_end:build",
    "proxyConfig": "proxy.config.json"
  }
}

3. 在package.json中找到"scripts"这一项，修改项目启动方式：

"scripts": {
  "ng": "ng",
  "start": "ng serve --proxy-config proxy.config.json --host 0.0.0.0",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
}

注：上述方法属于永久性配置，不想要固定启动配置的话也可以选择在命令行启动时输入。

如果其他配置没有问题的话，现在重新启动前端已经可以成功向后端服务器请求资源了✔️。

关于同源策略和跨域访问

推荐几篇理论透彻易懂的博客：

• 浏览器同源政策及其规避方法
• 跨域问题解决方案