如何修复对Tomcat服务器进行API调用时的"blocked by CORS policy"错误

Question

当我尝试使用 axios 对 Tomcat 8 服务器进行 API 调用时，我遇到了以下错误。

被 CORS 策略阻止：没有"访问控制-允许源"标头 存在于请求的资源上。

Answer 1

1. 打开要在其中启用 CORS 的 Web 应用程序的$CATALINA_HOME/webapps/<your-web-app>/WEB-INF/web.xml文件，并添加 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>
   </filter>
   <filter-mapping>
   　　<filter-name>CorsFilter</filter-name>
   　　<url-pattern>/*</url-pattern>
   </filter-mapping>
   

   *重要提示：出于安全原因，将<param-value>*</param-value>更改为仅允许您的网站，而不是*。

您可能需要添加其他<init-param>。例如，您需要添加cors.allowed.headers才能接受自定义标头，例如token。 请阅读 tomcat 文档以获取有关初始化参数的更多信息。

2. 进行 API 调用。

   axios
   .post('http://path/to/api'
   , {xhrFields: {withCredentials: true},
   })
   .then(function (response) {
   console.log(response);
   })
   .catch(function (error) {
   console.log(error);
   });
   

我花了几个小时才弄清楚我必须有{xhrFields: {withCredentials: true}才能让它工作。

希望对您有所帮助。