向Java后端发送带有React中参数的get请求，但显示请求的资源上不存在“Access-Control-Allow-Origin”标头

Question

我试图向Java后端服务器发送一个带有2个参数的get请求，页面和限制，它显示了以下错误：-“访问XMLHttpRequest at”http://localhost:8080/BatchDisplay.do?page={page}

我的反应代码：-

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);
})
};

我的网页.xml文件在java：-

<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>

Answer 1

不久前我也遇到过这个问题。在您的< code>Web.config文件中，将此内容放入< code >

<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>