Angular 5向Requestbin发起POST请求遇跨域错误求助

嘿，我来帮你搞定这个跨域问题～你遇到的Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present错误，本质是浏览器的同源策略限制在搞鬼。

为什么Postman能成功，Angular不行？ #

Postman是独立的HTTP客户端，不受浏览器的同源策略约束，直接发请求就能通；但你的Angular应用跑在localhost上，和Requestbin的域名属于不同源，浏览器会自动先发一个OPTIONS预请求，检查目标服务器是否允许跨域请求。如果Requestbin返回的响应里没有Access-Control-Allow-Origin这类允许跨域的头，浏览器就会拦截请求，报你看到的错误。

解决办法（推荐开发环境用代理） #

Angular本身提供了代理配置，能帮你在开发阶段绕过跨域限制，步骤如下：

1. 在项目根目录新建一个proxy.conf.json文件，内容写：

   {
     "/requestbin-proxy": {
       "target": "https://requestbin.io",
       "secure": false,
       "changeOrigin": true,
       "pathRewrite": {
         "^/requestbin-proxy": ""
       }
     }
   }
   

2. 修改启动配置：
   • 要么在angular.json里找到projects -> 你的项目名 -> architect -> serve -> options，添加"proxyConfig": "proxy.conf.json"
   • 要么启动项目时直接用命令：ng serve --proxy-config proxy.conf.json
3. 调整你代码里的请求路径：
   比如原来你请求的是https://requestbin.io/abc123，现在改成/requestbin-proxy/abc123，Angular的代理会自动把请求转发到Requestbin，这样就不会触发跨域限制了。

其他临时方案（仅适合测试） #

• 用Chrome的跨域插件（比如Allow CORS: Access-Control-Allow-Origin），开启后浏览器会跳过同源检查，但这个方法只适合自己开发测试用，上线绝对不能用。

总之，开发阶段用Angular代理是最正规的解决方式，既能正常调试，也符合浏览器的安全规范～

内容的提问来源于stack exchange，提问作者Luiz Ricardo Cardoso