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

Question

当我尝试在 angular 7 网络应用程序中执行 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

这个问题不在你的前端angular代码上，它与后端有关，

在后端代码中尝试以下步骤：

1.npm install cors

2.put app.use(cors()) 在主快速路由文件中。（启用所有 CORS 请求）

可能对你有用。

参考 link : https://expressjs.com/en/resources/middleware/cors.html

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

而在 angular 中，请求是

 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

我运行遇到了同样的问题，即使我的 API 使用了 cors 并且有正确的 headers。

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

我刚从

http://api.example.com

到https协议

https://api.example.com

它解决了所有问题。

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

这里是如何创建一个简单的代理转发请求https://whosebug.com/a/20354642/7602110

所以不要向

提出请求

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

您需要向

提出请求

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

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

Answer 4

如果您正在使用 Tomcat 试试这个：full documentation

 HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;

        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, DELETE, OPTIONS, HEAD");
        response.setHeader("Access-Control-Allow-Headers", "Origin, Accept, X-Requested-With, Content-Type, "
                + "Access-Control-Request-Method, Access-Control-Request-Headers, Authorization");


        if ( request.getMethod().equals("OPTIONS") ) {
            response.setStatus(HttpServletResponse.SC_OK);
            return;
        }


        filterChain.doFilter(servletRequest, servletResponse);

然后在 web.xml

<filter>
    <filter-name>cors</filter-name>
    <filter-class>classYouImplementTheCodeAbove</filter-class>
</filter>

<filter-mapping>
    <filter-name>cors</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

如果您使用的是其他前往 https://enable-cors.org/server.html 并搜索它

Answer 5

我运行前段时间遇到过同样的问题。下面的一段代码在后端为我工作。后端是用 express，node.js 写的。

app.use(function (request, response, next) {
  response.header("Access-Control-Allow-Origin", "*");
  response.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Answer 6

有两种方法可以解决这个问题：

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

单击 window -> 输入运行并按回车键 -> 在命令 window 中复制：

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

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

永久解决方案：

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

让我知道它是否有效。

Answer 7

你的错误：

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.

我的错误：

Access to XMLHttpRequest at 'localhost:3000/api/todo' from origin 'http://localhost:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

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

这里有两个问题：

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

Ans. Putting 'http://' before api i used, means 'http://localhost:3000/api/todo'.

可能是什么导致了您的错误？

Ans. Can't say for sure but i dont see your api url instead it says 'my_url' (comparing both errors). I thik you may've passed string instead of variable.

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

Answer 8

在 package.json 中添加代理或使用 chrome 扩展绕过并不是真正的解决方案。在注册路由之前，请确保在服务器端启用了 CORS。给出的示例在 Node.js 和 Express.js 中。希望这对您有所帮助！

    app.use(cors())
    app.use('/posts', postRoutes)

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

Access to XMLHttpRequest has been blocked by CORS policy

cors

angular

angular7