无法使用 axios 和 ReactJS 执行获取请求

Posted 2023-03-04

【中文标题】无法使用 axios 和 ReactJS 执行获取请求

【英文标题】：Can't perform get request with axios and ReactJS

【发布时间】：2018-10-30 20:35:20

【问题描述】：

我正在使用 ReactJS 开发一个 Web 应用程序，并且我想使用 axios 执行一个 GET 请求。首先我尝试了以下行：

axios.get("http://localhost:8080/MyWebApplication/MyServlet").then(data=>
    //Code
);

但我收到以下错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/WebApplication1/NewServlet. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

后来我尝试添加header解决问题

axios.get("http://localhost:8080/WebApplication1/NewServlet", headers:'Access-Control-Allow-Origin': '*').then(data=>
    //code
);

但问题仍然存在。怎么了？

【问题讨论】：

在后台你用什么？

【参考方案1】：

crossDomain 的默认值如下：

同域请求为假，跨域请求为真

如果您正在发出相同的域 json 请求，并且您的站点可能会将请求重定向到另一个域以提供响应（通过 HTTP 3XX），那么您应该将 crossDomain 属性设置为 true，以便您的站点可以读取响应调用脚本。

这为您提供了在发出同源请求时检索 JSON 的优势，以及在发出跨源请求时 JSONP 的功能。如果 CORS 在您重定向到的域上处于活动状态，那么您可以在请求选项中设置 jsonp: false。

 axios.get("http://localhost:8080/WebApplication1/NewServlet", crossDomain: true ).then(data=>
    //Logic of your code
 );

【讨论】：

而且服务器必须正确配置。如果您使用 JBoss，这里有一个显示如何操作的链接：forum.camunda.org/t/enable-cors-on-wildfly/673/2

【参考方案2】：

Access-Control-Allow-Origin 是响应头，而不是请求头。您的服务器应该以Access-Control-Allow-Origin 响应 - 这是它告诉浏览器某些跨域请求是正常的并且应该被允许的方式。

参考： https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin