请求的资源 - 离子2应用程序中不存在"Access-Control-Allow-Origin"标头

Question

当我尝试使用POST请求访问本地服务器时收到以下错误:

XMLHttpRequest无法加载http://127.0.0.1:8000/api/v1/users/login.请求的资源上不存在"Access-Control-Allow-Origin"标头.原产地" 的http://本地主机:8100 "因此不允许访问.

我的服务器允许CORS,因为我已经通过发送邮递员的请求来测试它并且它可以工作.

这是我在前端的代码:

private headers = new Headers({
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
    'Access-Control-Allow-Headers': 'X-Requested-With,content-type',
    'Access-Control-Allow-Credentials': true 
});


postLogin(data) {
    console.log(data);
    return new Promise((resolve) => {
        this.http.post(this.api + "users/login", data, {headers: this.headers})
            .map(res => res.json())
            .subscribe(answer => {
                 this.loggedIn = true;
                 this.token = answer.token;
                 resolve(answer);
            });
    });
 }

PS:我没有收到GET请求的错误.

我试图放一个代理,它不会改变任何东西:(

这是我的ionic.config.json:

{
  "name": "hardShop",
  "app_id": "",
  "v2": true,
  "typescript": true,
  "proxies": [
      {
          "path": "/api",
          "proxyUrl": "http://127.0.0.1:8000"
      }
  ]
}

Answer 1

在浏览器中再次尝试使用此插件.

它允许您从任何来源请求任何地址,绕过http/https安全要求或浏览器设置的其他限制(称为CORS).实际上它注入了'Access-Control-Allow-Origin': '*'接收到的响应头之前,它被传递到您的应用程序.

请记住,这是一种创可贴解决方案,主要用于开发.您的服务器的响应必须实际上具有'Access-Control-Allow-Origin': '*'标头,最好具有比特定值更具体的值*.

您现在正在做的事实际上没有任何效果,因为您作为客户端正在向服务器发送带有该标头的请求,然后服务器立即忽略它.重要的是服务器在回复客户端时有这个标题.

据我所知,邮递员并不适用CORS,所以也许这就是为什么它不会受到影响.