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

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

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

但问题仍然存在。有什么问题？

Answer 1

crossDomain的默认值如下：

对于同域请求，

为false，对于跨域请求，则为true

如果您正在进行相同的域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

无法使用axios和ReactJS执行get请求

2 个答案: