注意:我已经找到了解决方案。我只是发布问题和决议,以防其他人有类似的问题
长话短说:
当我有一个REACT客户端应用程序向我在NetBeans上运行的Payara服务器上运行的Java Web服务器发送HTTP帖子时,我在浏览器的Developer Tools窗口中收到此CORS错误消息:
SEC7120:[CORS]原点'http://localhost:3000'在'http://localhost:3000'的跨源资源的Access-Control-Allow-Origin响应头中找不到'http://localhost:8080/DatabaseWebService/databaseConnectorMethod'。
有关CORS的更多信息,请参阅此网站https://enable-cors.org/
详细故事:
我在http://localhost:3000上运行了一个REACT项目,向我在Java Web服务上发布HTTP帖子(DatabaseWebService),它运行在本地Payara Server版本4.1.1上。 REACT应用程序请求的Web服务URL是'http://localhost:8080/DatabaseWebService/databaseConnectorMethod'
每次运行REACT代码时,我都会收到上面列出的CORS错误。
这是我的REACT代码发出http post请求:
const postData = new URLSearchParams();
postData.append('var1', 'somedata1');
postData.append('var2', 'somedata2');
let axiosConfig = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
};
axios.post('http://localhost:8080/DatabaseWebService/databaseConnectorMethod', postData, axiosConfig)
.then((res) => {
console.log("AXIOS POST RESPONSE RECEIVED: ", res);
})
.catch((err) => {
console.log("AXIOS POST ERROR: ", err);
})
这是我的servlet代码:
public class DatabaseConnectorServlet extends HttpServlet {
@Override
final protected void doPost(final HttpServletRequest request, final HttpServletResponse response)
throws ServletException, IOException {
try {
System.out.println("DatabaseConnectorServlet Received a HTTP POST");
String var1= request.getParameter("var1");
String var2= request.getParameter("var2");
System.out.println(var1 + var2);
response.getWriter().print("I GOT YOUR MESSAGE");
} catch (Exception ex) {
response.getWriter().print(ex);
}
}
我在上面的Java代码中放置断点并看到它被击中,我看到它执行所有命令,包括response.getWriter()。print没有问题。但是,当我查看浏览器开发人员工具控制台窗口时,我确实看到了CORS异常。
解决方案在Java Web Service应用程序中,您需要添加一些标头以允许Response对象中的CORS。这是更新的Java代码,请注意额外的response.addHeader代码行:
public class DatabaseConnectorServlet extends HttpServlet {
@Override
final protected void doPost(final HttpServletRequest request, final HttpServletResponse response)
throws ServletException, IOException {
try {
System.out.println("DatabaseConnectorServlet Received a HTTP POST");
response.addHeader("Access-Control-Allow-Origin", "http://localhost:3000"); //Here's the extra line needed to allow CORS to your server side code
String var1 = request.getParameter("var1");
String var2 = request.getParameter("var2");
System.out.println(var1 + var2);
response.getWriter().print("I GOT YOUR MESSAGE");
} catch (Exception ex) {
response.addHeader("Access-Control-Allow-Origin", "http://localhost:3000");
response.getWriter().print(ex);
}
}
使用此更新的代码,我现在可以在Web浏览器开发人员工具的控制台窗口中看到示例“我给您的消息”文本,其中运行React代码。
这基本上允许来自不同域/端口(即在这种情况下为REACT应用程序)的http请求从该Java Web服务访问数据。
也是为了让你知道,你可以包含一些其他额外的标题(我在其他问题上看到的),我不需要我的情况,但可能对你有用。以下是其他标题和一些示例值:
response.addHeader("Access-Control-Allow-Origin", "http://localhost:3000");
response.addHeader("Access-Control-Allow-Headers", "Origin, Content-Type, Accept, X-Auth-Token");
response.addHeader("Access-Control-Allow-Credentials", "true");
response.addHeader("Access-Control-Request-Headers", "Origin, X-Custom-Header, X-Requested-With, Authorization, Content-Type, Accept");
response.addHeader("Access-Control-Expose-Headers", "Content-Length, X-Kuma-Revision");
response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH, OPTIONS");