请求的资源上不存在“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/登录.请求的资源上不存在Access-Control-Allow-Origin"标头.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"
      }
  ]
}

推荐答案

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

Try again using this plugin in your browser.

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

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屋！