Angular 4跨域请求报错：缺少Access-Control-Allow-Origin头如何解决？

你遇到的这个CORS错误是前端开发里超常见的问题，本质是浏览器的同源策略在搞事情——你的前端跑在http://localhost:4200，但请求的后端服务在另一个域名（或者不同端口/协议），浏览器会直接拦截这种跨域请求，除非后端明确给你的源开了权限。

先把你碰到的错误贴出来更清晰：

Error: Access to XMLHttpRequest at 'myserviceURL' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

下面给你几个可行的解决思路，按推荐优先级排序：

方案1：修改后端服务，配置CORS允许你的源访问 #

这是最标准、最靠谱的解决方式，毕竟CORS的权限控制本来就是后端该做的事。

• 如果后端是Java Spring Boot：可以在控制器类上加@CrossOrigin(origins = "http://localhost:4200")注解，或者在全局配置类里统一设置允许的源、请求方法、请求头。
• 如果是Node.js/Express：直接用cors中间件就行，代码示例：

  const cors = require('cors');
  // 只允许localhost:4200访问，生产环境可以换成正式域名
  app.use(cors({ origin: 'http://localhost:4200' }));
  

• 不管用什么后端框架，核心都是让服务返回Access-Control-Allow-Origin: http://localhost:4200的响应头（如果是测试环境也可以用*允许所有源，但生产环境绝对不推荐这么做）。

方案2：Angular本地代理转发（仅开发环境用） #

如果后端暂时没法改，或者你只是在本地调试阶段，可以用Angular自带的代理功能，让前端请求先发到本地开发服务器，再由服务器转发到后端，这样就绕开了浏览器的同源限制。

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

   {
     "/api": {
       "target": "myserviceURL", // 替换成你的真实后端地址
       "secure": false,
       "changeOrigin": true,
       "pathRewrite": { "^/api": "" }
     }
   }
   

   这里的/api是你前端请求的前缀，比如原来写myserviceURL的地方改成/api，代理会自动帮你转发到真实后端。
2. 修改angular.json里的serve配置，加上代理文件路径：

   "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
       "browserTarget": "你的项目名:build",
       "proxyConfig": "proxy.conf.json"
     },
     // 其他配置...
   }
   

3. 重启Angular开发服务器，之后你的请求就可以写成：

   return this.http.post('/api', data, { headers: myHeaders })
   

方案3：浏览器插件临时绕过（仅调试用，生产无效） #

比如Chrome的「Allow CORS: Access-Control-Allow-Origin」插件，安装后开启就能让浏览器暂时跳过CORS检查。但这只是临时调试手段，只能在你自己的浏览器上生效，绝对不能用于生产环境。

另外看了你提供的代码，有两个小细节可以优化下：

• 变量名大小写要统一：你定义的是username和password，但data里写的是userName和Password，会导致参数传递错误，建议改成一致的：

  var data={
    "username": username,
    "password": password,
  }
  

• 你同时设置了Basic Auth的Authorization头，又在data里传了用户名密码，有点重复，确认下后端需要哪种认证方式，避免冗余。

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