如何在从 jquery 发送 $.get 请求时启用 CORS？

Posted 2023-03-04

【中文标题】如何在从 jquery 发送 $.get 请求时启用 CORS？

【英文标题】：How to enable CORS while sending $.get requests from jquery?

【发布时间】：2018-02-07 14:12:18

【问题描述】：

我已经设置了一个托管我的 API 代码的 Tomcat 9 服务器。当我从邮递员那里打电话时，它工作正常。我还在 Tomcat conf/web.xml 文件中添加了以下过滤器：

<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.exposed.headers</param-name>
<param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
</init-param>
</filter>

我正在使用以下 jQuery 代码发送GET 请求：

$(document).ready(function()

    $.get("http://localhost:8080/myapp/webapp/cars", function(data, status)
        alert("Data: " + data + "\nStatus: " + status);
);

它会抛出以下错误：

请求中没有“Access-Control-Allow-Origin”标头 资源。因此不允许访问 Origin 'null'。

我应该在服务器端做些什么来允许跨域请求吗？

如何修改上面的 jQuery 请求来摆脱这个错误？

许多其他帖子建议将ajax 方法调用与dataType:"jsonp" 一起使用？是否有可能以某种方式对上述$.get 方法进行修改？如果没有，请给出GET 和POST 的示例，以使用ajax 方法启用CORS。

---

编辑

我也尝试了以下配置：

<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.origins</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
</init-param>
<init-param>
<param-name>cors.exposed.headers</param-name>
<param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
</init-param>
<init-param>
<param-name>cors.support.credentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.preflight.maxage</param-name>
<param-value>10</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

...但它仍然无法正常工作。

【问题讨论】：

您没有正确设置 init-param。请参阅docs for the CorsFilter。您需要将 cors.allowed.origins init-param 设置为您想要允许的来源（或 * 用于所有来源）

@peeskillet 请参考问题中的 EDIT。还是不行

【参考方案1】：

您必须在使用 Tomcat 处理/创建响应时添加标头。

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "Content-Type");

回复问题Where do I add this：

在为 servlet 准备响应时添加它（即适当的方法，在以下示例中为 POST）：

public class MyServlet extends HttpServlet 

    @Override
    public void doPost(final HttpServletRequest request, 
                       final HttpServletResponse response) throws ServletException 
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type");
    

如果您没有实现任何 servlet，并且您想通过配置来实现（例如，init-parameters），您也可以将其添加到您的 init 参数中，但请确保拥有所有标题 @ 987654326@、Access-Control-Allow-Methods、Access-Control-Allow-Headers 设置，并带有相应的内容。

如果仍然无法正常工作，那么查看响应中设置的标头会有助于确定可能设置不正确的标头。

【讨论】：

我在哪里添加这个？