对XMLHttpRequest的访问已被CORS策略阻止

Question

当我尝试在角7网络应用程序中执行补丁请求时，我遇到了一个问题。在我的后端，我有：

app.use((req, res, next) => {
    res.set({
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "*",
        "Access-Control-Allow-Headers": "'Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token'",
    });

    next();
});

在我的前端服务中，我：

  patchEntity(ent: any, id) {
    let headers = new Headers({ 'Content-Type': '*' });
    let options = new RequestOptions({ headers: headers });
    return this.http.patch('my_url', ent).map((res: Response) => res.json());
  };

错误是：

Access to XMLHttpRequest at 'my_url' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

我能做什么？谢谢

Answer 1

您的错误：

从源站访问位于'my\u url'的XMLHttpRequesthttp://localhost:4200'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：它没有HTTP ok状态。

我的错误：

CORS策略已阻止从源http://localhost:4200访问XMLHttpRequest：跨源请求仅支持协议方案：超文本传输协议，数据，chrome，chrome-扩展，https。

（虽然有点不同的错误，但我还是会回答）

现在有两个问题：

1. 我是如何解决我的问题的？

答：在我使用的api之前加上“http://”表示http://localhost:3000/api/todo'.

答：不能肯定，但我没有看到你的api url，而是显示“我的url”（比较两个错误）。我想你可能传递了字符串而不是变量。

如果这对任何人都有帮助，我会很高兴的。因为这花了我将近2小时，现在已经是午夜了。

Answer 2

在节点中使用此选项

    app.use(function (req, res, next) {
    //Enabling CORS
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, 
    Accept, x-client-key, x-client-token, x-client-secret, Authorization");
      next();
    });

在角度上，请求是

 auth(login): Promise<any> {
 return new Promise((resolve, reject) => {
   this._http.post('url:3000/api/auth/login', { ...login })
     .subscribe((response: any) => {
       resolve(response);
     });
 });
}

Answer 3

有两种处理方法：

1. 临时前端解决方案，以便您可以测试API集成是否正常工作：

点击窗口-

chrome.exe--user data dir=“C://chrome dev session”--禁用web安全性

这将打开一个新的“Chrome”窗口，您可以轻松工作。这是暂时的解决办法。每次你都必须使用这个铬窗口。

在后端代码中，开发人员需要在CRUD api调用方法的正上方添加注释@Crossorigin。

让我知道它是否有效。