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

Question

我正在使用 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
});

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

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

Answer 2

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

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