所请求的资源上不存在"Access-Control-Allow-Origin"标头-ionic 2应用程序 [英] No 'Access-Control-Allow-Origin' header is present on the requested resource - ionic 2 application

问题描述

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

I receive the following error when i try to access my local server with a POST request:

XMLHttpRequest无法加载 http://127.0.0.1:8000/api/v1/users/login .所请求的资源上没有"Access-Control-Allow-Origin"标头.因此，不允许访问来源' http://localhost:8100 .

XMLHttpRequest cannot load http://127.0.0.1:8000/api/v1/users/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

我的服务器允许使用CORS，因为我已经通过与邮递员发送请求进行了测试，并且可以正常工作.

My server allows CORS because I've tested it by sending the request with postman and it works.

这是我在前端的代码:

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请求中没有收到此错误.

PS: I did not get this error with a GET request.

我试图放置一个代理，它没有任何改变:(

I tried to put a proxy and it doesn't change anything :(

这是我的ionic.config.json:

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

推荐答案

使用此插件在您的浏览器中.

它允许您从任何来源通过Ajax请求任何地址，而绕过http/https的安全要求或浏览器设置的其他限制(称为

It allows you to ajax request any address from any source, bypassing http/https security requirements or other limitations set by browsers (known as CORS). Practically it injects the 'Access-Control-Allow-Origin': '*' header in the received response before it is passed on to your app.

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

Please keep in mind that this is a band-aid solution, predominantly for development. Your server's response has to actually have the 'Access-Control-Allow-Origin': '*' header, preferably with a more specific value than *.

您现在所做的几乎没有任何效果，因为作为客户的您向服务器发送了带有该标头的请求，然后服务器立即忽略了该请求.重要的是服务器在对您的客户端的响应中具有此标头 .

What you are doing now has practically no effect, since you as the client are sending a request with that header to the server, who then promptly ignores it. What matters is that the server has this header in his response to your client.

据我所知，邮递员并未应用CORS，所以也许这就是为什么它不受影响的原因.

Postman doesn't apply CORS as far as i know, so maybe that's why it's not affected.

这篇关于所请求的资源上不存在"Access-Control-Allow-Origin"标头-ionic 2应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！