javascript - 在 ember js 中使用 response.json() 从 API 获取响应时显示错误
问题描述
我必须创建一个 Web 应用程序以在 mySQL 数据库中添加用户并使用 ember js 实现 UI。
应用程序/组件/user.hbs
<h1>User Management!</h1>
<div>
<label1>User Id </label1> <colon1>:</colon1>
<input1>{{input type="text" value=id placeholder="Enter id"}}</input1>
<label2>Firstname</label2> <colon2>:</colon2>
<input2>{{input type="text" value=firstname placeholder="Enter firstname"}}</input2>
<label3>Lastname</label3> <colon3>:</colon3>
<input3>{{input type="text" value=lastname placeholder="Enter lastname"}}</input3>
<label4>Mail Id</label4> <colon4>:</colon4>
<input4>{{input type="text" value=mailid placeholder="Enter mailid"}}</input4>
</div>
<button1 {{on "click" (fn this.user "add" id firstname lastname mailid )}}>Add User</button1>
<button2 {{on "click" (fn this.user "delete" id firstname lastname mailid )}}>Delete User</button2>
应用程序/组件/user.js
import Component from '@glimmer/component';
import {action} from "@ember/object";
import {tracked} from "@glimmer/tracking";
export default class UserComponent extends Component {
@action
async user (type,id,firstname,lastname,mailid){
let response=await fetch("http://localhost:8080/UserManagement/UserManagementServlet",
{ method: "POST",
mode:"no-cors",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
"type": type,
"id": id,
"firstname":firstname,
"lastname":lastname,
"mailid":mailid
})
});
let parsed=await response.json();
alert(parsed.status);
}
}
Servlet API 代码
//Required Header files
@WebServlet("/UserManagementServlet")
public class UserManagementServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest req,HttpServletResponse res) throws ServletException, IOException
{ res.setContentType("application/json");
res.setCharacterEncoding("UTF-8");
Gson gson=new Gson();
BufferedReader br=new BufferedReader(new InputStreamReader(req.getInputStream()));
String param=br.readLine();
User user = gson.fromJson(param, User.class);
HashMap<String,String> jsonfile=new HashMap<String,String>();
PrintWriter out=res.getWriter();
String url="jdbc:mysql://localhost:3306/employee",username="root";
String password="root";
Connection con=null;
PreparedStatement pst;
String query="select*from user";
ResultSet rs;
try {
Class.forName("com.mysql.cj.jdbc.Driver");
con = DriverManager.getConnection(url,username, password);
} catch (Exception e) {
e.printStackTrace();
}
System.out.println("Entered");
if (user.getType().equals("add")) {
try {
String insertquery="INSERT INTO user" +" (id,firstname,lastname, mailid) VALUES " +" (?,?, ?, ?);";
pst = con.prepareStatement(insertquery);
pst.setString(1, String.valueOf(user.getId()));
pst.setString(2, user.getFirstName());
pst.setString(3, user.getLastName());
pst.setString(4, user.getMailid());
jsonfile.put("id", String.valueOf(user.getId()));
jsonfile.put("firstname", user.getFirstName());
jsonfile.put("lastname", user.getLastName());
jsonfile.put("mailid", user.getMailid());
jsonfile.put("status","User Added Successfully");
String final1=gson.toJson(jsonfile);
System.out.println(final1);
out.println(final1);
pst.executeUpdate();
} catch (Exception e) {
out.println("error"+e);
}
}
out.flush();
}
}
它显示了 Cors 错误,所以我在 user.js 中添加了“mode”:“no-cors”,但之后 cors 错误消失了,但这个错误没有。
单击添加用户按钮时,在此行中显示错误“let parsed=await response.json();”
user.js:54 Uncaught (in promise) SyntaxError: Unexpected end of input
at UserComponent.user (user.js:54)"
解决方案
基本上我只能建议了解 CORS 是什么。简而言之,您正在尝试发出跨域请求(可能是 from http://localhost:4200
to http://localhost:8080
),然后您必须使用 CORS,否则浏览器会出于安全原因阻止此请求。
但是,这可能不是您想要的。出现此问题是因为您运行 ember 开发服务器,因此与您的后端有不同的来源。然而,在生产的后期,这不会发生 - 你不会在那里运行 ember 服务器,但可能有一个网络服务器同时为你的后端和前端服务。
对于这种情况(并非总是如此,但经常如此),ember 开发服务器可以--proxy
选择。因此,您将运行ember serve --proxy=http://localhost:8080
,然后它将代理所有 AJAXhttp://localhost:4200
请求http://localhost:8080
。
然后你将你的 URLfetch
从更改"http://localhost:8080/UserManagement/UserManagementServlet"
为"/UserManagement/UserManagementServlet"
。这是因为如果您不指定原点但以 a 开头,/
则它始终是当前原点。这还有一个好处,就是您不必为了生产而改变它。
然后浏览器将请求"http://localhost:4200/UserManagement/UserManagementServlet"
哪个可以在没有 CORS 的情况下工作(也不需要mode:"no-cors"
),并且 ember 开发服务器将重定向它。
但是,如果您计划在生产中为后端和前端分别设置服务器,这将无法正常工作,您将需要使用 CORS。
关于mode:"no-cors"
. 这将始终阻止您读取响应,从而使请求对加载数据毫无用处。这仅与发送数据有关。见这里:
JavaScript 可能无法访问结果响应的任何属性。
推荐阅读
- javascript - 如何在javascript中通过动态ID填充选择
- boolean - 当给定 a^b, b^c 和 c^a 时如何得到 a,b,c
- textbox - Angular 6 - 材质文本框浮动占位符不起作用
- jquery-ui - 使用 jQuery 选项卡时避免使用 ID
- python - Object_list 未在模板中显示正确的数据
- mysql - 带有 MySQL 问题的 Qt 静态构建
- android - 如何导入库“应用程序”,因为找不到要导入的包应用程序
- java - 转到更新页面时,Java Web 上的更新功能未填充文本框
- python - 使用 Python 获取子模块的 Git 哈希(首选 pygit2)
- python - numpy 数组上的余数函数 (%) 运行时间远长于手动余数计算