在 React to Java Backend 中发送带有参数的 get 请求，但在请求的资源上显示 No 'Access-Control-Allow-Origin' 标头

Posted 2023-03-04

【中文标题】在 React to Java Backend 中发送带有参数的 get 请求，但在请求的资源上显示 No \'Access-Control-Allow-Origin\' 标头

【英文标题】：Sending get request with parameters in React to Java Backend but showing No 'Access-Control-Allow-Origin' header is present on the requested resource在 React to Java Backend 中发送带有参数的 get 请求，但在请求的资源上显示 No 'Access-Control-Allow-Origin' 标头

【发布时间】：2021-06-16 02:14:07

【问题描述】：

我正在尝试发送带有 2 个参数页面的 get 请求并限制到 Java 后端服务器，它显示以下错误：- “从源 'http://localhost:3000' 访问 'http://localhost:8080/BatchDisplay.do?page=page&limit=count' 的 XMLHttpRequest 已被 CORS 策略阻止：无 '访问-Control-Allow-Origin' 标头出现在请求的资源上"

我的反应代码：-

const getLatestJSPost = () => 
const API_URL = "http://localhost:8080/BatchDisplay.do?page=page&limit=count";
axios(API_URL)
.then((response) => response.data)
.then((data) => 
            setData((prev) => [...prev, ...data]);
            size=data.sizevalue;
            setHasMore(true);
)
;

我在 java 中的 Web.xml 文件：-

<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>http://localhost:3000</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
 <url-pattern>/*</url-pattern>
 </filter-mapping>
<servlet>
 <servlet-name>BatchDisplay</servlet-name>
<servlet-class>com.School.BatchDisplay</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>BatchDisplay</servlet-name>
<url-pattern>/BatchDisplay.do</url-pattern>
</servlet-mapping>

【参考方案1】：

我不久前遇到过这个问题。在您的 Web.config 文件中将其放入 <system.webServer>

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    </customHeaders>
</httpProtocol>