Question

错误：CORS策略已阻止从源“ http://localhost:4200”访问“ 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);
  }
  );

Answer 1

由于它是服务器端的问题，您可以做的是：如果您使用的是chrome，则可以为CORS添加chrome扩展名，从而可以访问“ Access-Control-Allow-Origin”

它将起作用。

为我工作！！

Answer 2

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

// proxy.json

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

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

此外，您必须在npm start内更改package.json属性，或者在ng serve内更改angular.json，以便默认情况下使用命令{{1 }}

// angular.json

ng serve/npm start

Answer 3

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

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

角度4：请求的资源上不存在“ Access-Control-Allow-Origin”标头

3 个答案: