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

有两种处理方法：

临时前端解决方案，因此您可以测试您的API集成是否有效：

单击窗口->键入run，然后在命令窗口副本中按Enter->：

chrome.exe --user-data-dir =“ C：// Chrome开发者会话” --disable-web-security

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

永久解决方案：

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

让我知道它是否有效。

Answer 2

此问题不在您的前端角度代码上，它与后端有关，

尝试在您的后端代码中执行以下步骤：

1。npm install cors

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

也许对您有用。

参考链接：https://expressjs.com/en/resources/middleware/cors.html

Answer 3

在节点中使用

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 4

我遇到了同样的问题，我的API安装了cors，标头正确，但仍然遇到了同样的问题。

我提出的请求不安全，这就是为什么我收到错误消息。我只是将 http://my-api.com 更改为 https://my-api.com ，并修复了所有问题。

Answer 5

如果您使用的是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 6

我前段时间也遇到了同样的问题。下面的代码在后端为我工作。后端是用express节点编写的。

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 7

您的错误：

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

我的错误：

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

（即使错误有所不同，但我还是会回答）

现在在这里有两个问题：

我如何解决我的问题？

回答。在我使用的api之前加上“ http：//”，表示“ http：// localhost：3000 / api / todo”。

什么原因导致了您的错误？

回答。不能肯定地说，但我看不到您的api网址，而是说“ my_url”（比较两个错误）。我想你可能传递了字符串而不是变量。

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

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

7 个答案: