java - 对 Java Servlet 的 Angular 请求被阻止的 CORS 策略
问题描述
这是我的 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 政策,您的请求已被阻止,这里是确切的错误,
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,
…
}
解决方案
我有类似的情况,用下面的配置修复它。以相对于 package.json 的角度创建 proxy.conf.json 文件。向其中添加以下代码:/api,添加您的通用路径。
{
"/api": {
"target": "http://localhost:8080",
"secure:": false
}
}
在 package.json 中,脚本: { start: "ng serve --proxy-config proxy.conf.json", "build": "ng build --base-href=\"./\""
添加此配置并运行角度服务器。让我知道它是否有效并且您遇到任何错误。
推荐阅读
- python - 将字母旋转固定位置[python编程]
- php - 在 Ubuntu 18.04 LTS 上安装 wordpress
- c# - 如何将光标设置为组合框 xaml/c# 中的文本?
- javascript - 匹配字符串到数组
- terminal - 使用 Linux 终端将十六进制数转换为十进制数
- jquery-ui-sortable - contenteditable 导致 jqueryui 可排序在拖动时滞后。拖动时暂时删除 contenteditable?
- reactjs - 输入“需要”
' 不可分配给类型 'Validator<"horizontal" | “垂直” | 未定义>' - docker - 如何使用 kubernetes 中的内存和 cpu 以外的其他指标自动缩放 Pod
- gwt - GWT:gwt-material-addins:MaterialCarousel:您的轮播容器尚未初始化
- php - MongoConnectionException - 发现未知连接字符串选项“数据库”,值为“db_name”