Angular 5跨域请求报错：No 'Access-Control-Allow-Origin' header缺失

嘿，这个CORS坑我之前踩过好多次！你遇到的情况太典型了——Postman和Webstorm的Rest客户端能正常请求，但Angular代码里发起请求就报跨域错，核心原因就是浏览器的同源策略在搞事情：这类工具不受浏览器的CORS规则限制，但你的Angular应用跑在http://localhost:4200，和后端域名/端口不一致时，浏览器会自动发送一个OPTIONS预检请求，要是后端没正确响应这个请求，就会抛出你看到的那个错误。下面给你几个靠谱的解决办法：

这是从根源解决问题的方式，得让后端在响应里加上必要的CORS相关头：

• 必须配置的头：Access-Control-Allow-Origin，可以设为http://localhost:4200（仅限你的前端域名访问，更安全），或者*（允许所有域名，开发环境临时用用就行，生产别这么搞）
• 如果你的请求用了PUT/DELETE这类非简单请求，或者带了自定义请求头，还要加Access-Control-Allow-Methods，明确列出允许的HTTP方法（比如GET, POST, PUT, DELETE, OPTIONS）
• 若请求带自定义头，还得配置Access-Control-Allow-Headers，把允许的头字段列出来
• 关键提醒：后端要专门处理OPTIONS请求，返回上面这些头信息，而且不能返回404或其他错误状态码

举个Java Spring Boot的配置例子给你参考：

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        // 允许你的前端域名跨域
        config.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
        // 允许的HTTP方法
        config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
        // 允许所有请求头
        config.setAllowedHeaders(Arrays.asList("*"));
        // 对所有接口生效
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

如果你暂时没法调整后端配置，可以用Angular CLI的代理功能，把前端请求转发到后端，这样浏览器会认为是同源请求，不会触发CORS检查。

步骤很简单：

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

{
  "/api/*": {
    "target": "http://你的后端服务地址:端口",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

这里的/api/*是你前端请求的前缀，比如你前端原本请求http://后端地址/api/users，现在只需要写/api/users，代理会自动帮你转发到后端。

2. 修改package.json里的启动命令，加上代理配置：

"scripts": {
  "start": "ng serve --proxy-config proxy.conf.json"
}

3. 重启Angular开发服务，之后用相对路径发起请求就不会有CORS问题了。

这个方法只能用来临时测试，绝对不能用于生产环境！

• Chrome：右键Chrome快捷方式→属性，在目标栏末尾加上 --disable-web-security --user-data-dir="C:/ChromeDevSession"（路径可以自己随便指定一个空文件夹），然后启动Chrome，打开你的Angular应用，就不会有跨域限制了。
• Firefox：可以安装CORS Everywhere这类插件，开启后就能临时绕过浏览器的CORS检查。

最后再啰嗦一句：生产环境一定要用方案一，后端正确配置CORS，方案二和三都是开发阶段的临时解决方案哦！

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