Question

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

XMLHttpRequest无法加载http://127.0.0.1:8000/api/v1/users/login。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost: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

在浏览器中使用this plugin重试。

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

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

您现在正在做的事实际上没有任何效果，因为您作为客户端正在向服务器发送带有标头的请求，然后该服务器会立即忽略它。重要的是服务器在对客户端的响应中有这个标题。

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

Answer 2

当您使用 https （即受保护的图层）连接 Http 时，会显示此错误。当我在安全服务器中使用 Https 调用休息服务时，我在localhost中运行的应用程序时遇到了同样的错误。

要实现这一点，您需要在浏览器中安装插件，以便通过此锁定。

如果您使用的是chrome，请为chrome安装 CORS 插件，它会正常工作。

Answer 3

这个问题的一个原因可能是（个人经历）：可能是您为connectionstring部署了错误的database。

我使用了以下两个数据库连接，一个用于本地存储，另一个用于服务器存储

const localhost = await mongoose.connect('mongodb://localhost:27017/categories');
const serverhost = await mongoose.connect('mongodb://usename:password@ds015126.mlab.com:12345/myapp');

有些可能正在使用两个connectionStrings，就像我一样deploy localhost database-connection而不是真实server database-connection，然后尝试通过{{database访问postman 1}}或client-application然后面临这样的问题。

请确保deployed connectionstring {。}}。{/ p>

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

3 个答案: