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

Question

当我尝试在angular 7 Web应用程序中执行PATCH请求时遇到问题。在我的后端，我有：

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

有两种方法可以处理这个问题：

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

单击窗口 -> 键入 run 并按 Enter 键 -> 在命令窗口中复制：

chrome.exe --user-data-dir="C://Chrome 开发会话" --disable-web-security

这将打开一个新的“Chrome”窗口，您可以在其中轻松工作。这是一个临时解决方案。每次你都必须使用这个镀铬窗口。

2. 永久解决方案：

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

让我知道它是否有效。

Answer 2

你的错误：

从源“http://localhost:4200”访问 XMLHttpRequest'my_url'已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP 正常状态。

我的错误：

从源“http://localhost:4200”访问 XMLHttpRequest'localhost:3000/api/todo'已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。

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

现在这里有两个问题：

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

答。在我使用的 api 之前加上“http://”，意味着“http://localhost:3000/api/todo”。

2. 什么可能导致您的错误？

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

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

Answer 3

即使我的 API 使用 cors 并且具有正确的标头，我也遇到了同样的问题。

所以对我来说，问题是我提出了一个不安全的请求。我正在通过http协议访问我的 API ，这导致了错误。

我刚刚从

http://api.example.com

转为https协议

https://api.example.com

它解决了一切。

您还可以在您的网站上创建一个简单的代理，将您的请求转发到外部站点。例如，如果您尝试从您的网站 ( my-website.com ) 获取一些数据到 ( another-website.com )，并且您发出 POST 请求，则可能会遇到 cors 问题，但如果您从您的网站 ( my-website.com ) 获取数据拥有自己的域名，你会很好。

以下是如何创建一个简单的代理转发请求/sf/answers/1424824971/

所以不要提出请求

POST https://api.example.com/event/create

您需要向以下人员提出请求

POST https://my-website.com/api/event/create

我知道这是一些额外的工作，有时你没有能力做到这一点，但这肯定会阻止你遇到 cors 问题。

Answer 4

在节点中使用它

    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);
     });
 });
}