首页 > 解决方案 > 对 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,
    …
}

标签: javaangularservletscors

解决方案


我有类似的情况,用下面的配置修复它。以相对于 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=\"./\""

添加此配置并运行角度服务器。让我知道它是否有效并且您遇到任何错误。


推荐阅读