这是我的HTML页面
<form (submit)="onSubmit()">
<div class="form-group">
<input
class="form-control"
type="text"
name="usn"
id="usn"
[(ngModel)]="usn"
placeholder="Enter USN HERE"
/>
</div>
<input type="submit" value="submit" />
</form>
这是我的组件文件:
import { Component } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
private usn: string;
private url: string = "http://localhost:9090/AngularFetchData/GetData";
private headers: HttpHeaders;
constructor(private httpClient: HttpClient) {
this.headers = new HttpHeaders({
"Access-Control-Allow-Origin": "http://localhost:4200/",
"Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token"
});
}
onSubmit() {
this.httpClient
.post(
this.url,
{
usn: this.usn
},
{ headers: this.headers }
)
.subscribe((data: any) => {
console.log(data);
});
}
}
这是我的Servlet
package com.angular.fetchdata;
import java.io.BufferedReader;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import oracle.jdbc.driver.OracleDriver;
import org.json.*;
/**
* Servlet implementation class GetData
*/
@WebServlet("/GetData")
public class GetData extends HttpServlet{
private Connection con = null;
private String url="jdbc:oracle:thin:@//localhost:1521/XE";
private String user = "*******";
private String password = "*********";
private PreparedStatement pstmt;
private ResultSet res;
public void init(ServletConfig config) throws ServletException {
try {
DriverManager.registerDriver(new OracleDriver());
if((con = DriverManager.getConnection(url,user,password)) !=null){
}else {
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void destroy() {
// TODO Auto-generated method stub
try {
if(con != null) {
con.close();
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException,FileNotFoundException {
// TODO Auto-generated method stub
setAccessControlHeaders(response);
StringBuilder sb = new StringBuilder();
BufferedReader br = request.getReader();
String str = null;
while ((str = br.readLine()) != null) {
sb.append(str);
}
JSONObject jObj;
String usn = null;
try {
jObj = new JSONObject(sb.toString());
usn = jObj.getString("usn");
System.out.println(usn);
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
String s1="SELECT * FROM STUDENT WHERE usn=?";
pstmt = con.prepareStatement(s1);
pstmt.setString(1, usn);
res=pstmt.executeQuery();
while(res.next() == true) {
String temp1=res.getString(1);
String temp2=res.getString(2);
int m1 = res.getInt(3);
int m2 = res.getInt(4);
int m3 = res.getInt(5);
PrintWriter pw = response.getWriter();
pw.println("Connection Established");
pw.println(temp1);
pw.println(temp2);
pw.println(m1);
pw.println(m2);
pw.println(m3);
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.write("Found User");
out.flush();
out.close();
System.out.println(temp1+ " "+temp2+ " "+m1+ " "+m2+ " "+m3);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
private void setAccessControlHeaders(HttpServletResponse response) {
// TODO Auto-generated method stub
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, DELETE, OPTIONS");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin, Content-Type, X-Auth-Token");
}
}
请帮助我处理我尝试了很多的这段代码,但是它始终给我同样的错误,因为它表示由于cors政策,您要求的内容已经完全错误了,错误,< / p>
Access to XMLHttpRequest at
'http://localhost:9090/AngularFetchData/GetData' from origin
'http://localhost:4200' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
core.js:9110 ERROR HttpErrorResponse
{
headers: HttpHeaders,
status: 0,
statusText: "Unknown Error",
url: "http://localhost:9090/AngularFetchData/GetData",
ok: false,
…
}
答案 0 :(得分:-1)
我有类似的情况,请使用以下配置进行修复。 相对于package.json创建一个proxy.conf.json文件。 向其添加以下代码: / api,添加您的通用路径。
{
"/api": {
"target": "http://localhost:8080",
"secure:": false
}
}
在package.json中,脚本:{开始:“ ng serve --proxy-config proxy.conf.json”, “ build”:“ ng build --base-href = \” ./ \“”
添加此配置并运行角度服务器。让我知道它是否有效,并且您遇到任何错误。