XMLHttpRequest的访问受到CORS策略的阻止

Question

XMLHttpRequest的访问受到CORS策略的阻止

73

当我尝试在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.

我能帮你做什么呢？谢谢。

- rikg93

1

可能是响应预检请求未通过访问控制检查的重复问题。 - paulsm4

1

Access-Control-Allow-Methods 的通配符在所有浏览器中尚未得到支持。此外，错误消息表明它返回了非200状态，因此您应该先查看为什么出错。 - user184994

1

不，只需传递实际值，即 POST、GET、OPTIONS、PATCH 以及其他您关心的值。 - user184994

请参考此帖子获取答案和解决此问题的方法： https://dev59.com/6LDla4cB1Zd3GeqP3SGQ#53528644 - Ramesh Roddam

答案部分正在慢慢填充有关如何在您喜爱的服务器上破解/禁用CORS的提示，这通常不是一个明智的做法，在这个问题的背景下也相当离题。将问题标记为“受保护”。 - Andrey Tyukin

显示剩余2条评论

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mohammad Abdorrahmani · Answer 1

在我的情况下，我在“.htaccess”文件的底部使用这个头部。

    Header always set Access-Control-Allow-Origin "https://example.com"
    Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
    Header always set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type,Authorization, Accept"
    Header always set Access-Control-Allow-Credentials "true"

- CodeLife · Answer 2

我遇到了这个问题，原来是我的操作定义中有语法错误。

 def self.rate_skills(params)
    data = {}
    data = where(individual_id: params[:individual_id]).select(:tool_name, :score)group('category').order(score: :desc).first(3)
    data 
  end

问题在于我把“group”之前的句号给漏掉了

 def self.rate_skills(params)
    data = {}
    data = where(individual_id: params[:individual_id]).select(:tool_name, :score).group('category').order(score: :desc).first(3)
    data 
  end

- FTello31 · Answer 3

如果您正在使用Tomcat，请尝试这个：完整文档。

 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 并搜索它