Angular 角度4:请求的资源上不存在“访问控制允许源”标头

错误：CORS策略已阻止从源站访问“myserviceURL”处的XMLHttpRequest：请求的资源上不存在“Access Control Allow origin”标头

示例代码：

  let myHeaders = new HttpHeaders();
  let username: string = 'admin';
  let password: string = 'admin';
  myHeaders.append("Authorization", "Basic " + btoa(username + ":" + password));
  myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');

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

  return this.http.post(url, data, { headers: myHeaders })
  .subscribe(
  res =>{
    console.log(res);
  },
  err => {
    console.log("Error occured "+err.status);
  }
  );

---

由于这是一个服务器端问题， 您可以做的是：如果您使用的是chrome，您可以为CORS添加chrome扩展，这将允许访问“访问控制允许来源”

它会起作用的

---

为我工作

如果后端在不同的端口上运行，默认情况下，Chrome将阻止跨源资源共享。当您开发应用程序时，您必须创建代理，该代理将在ng serve或npm start中运行，他将重新创建/转发所有api调用到指定地址。下面是一个例子：

//proxy.json

   {
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

这是什么意思？ 指向/api的任何http请求都将被重写为http://localhost:8080.

此外，您必须在package.json内部更改npm start属性，或者在angular.json内部更改ng serve，以便在默认情况下使用命令ng serve/npm start运行代理

//angular.json

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "yourapp:build",
        "proxyConfig": "proxy.json"
      },
      "configurations": {
        "production": {
          "browserTarget": "yourapp:build:production"
        }
      }
    }

---

当您使用“application/x-www-form-urlencoded”时，请以这种格式发送编码的数据对象

    const data =
      'username=' +
      encodeURIComponent(userName) +
      '&password=' +
      Password +
      '&grant_type=password';

---

后端代码如何？当您执行请求时，是否在开始时添加了http://以使您能够访问服务器？CORS是一种服务器端设置，因此不会成为客户端问题。