'Access-Control-Allow-Origin' 在开发 Angular7 REST 网络应用程序时出现问题

Question

我正在使用 angular7 和 jersey2 框架开发 webapp。 Java 后端运行s 在 tomcat9 和 angular 在 node.js.

我需要调用 http post 方法将昵称和密码发送到后端并获取用户作为响应。

angular代码：

constructor( private http: HttpClient ) { }

private user : User = null;

private httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
}

login( nickname : String, password : String ) {
let data = {
     "nickname": nickname,
     "password": password
}
this.http.post<User>(
     "localhost:8080/SRK/rest/users/auth",
     JSON.stringify(data),
     this.httpOptions
).subscribe((user : User) => { console.log(user); this.user = user; });

java 休息码：

@Path(value = "users")
public class UserService {

   @POST
   @Path(value = "auth")
   @Consumes(MediaType.APPLICATION_JSON + ";charset=utf-8")
   @Produces(MediaType.APPLICATION_JSON + ";charset=utf-8")
   public User auth(Map<String, String> nicknameAndPassword) {
       String nickname = nicknameAndPassword.get("nickname");
       String password = nicknameAndPassword.get("password");
       return new UserController.getUserWithNicknameAndPassword(nickname, password);
   }
}

我也尝试添加 "Access-Control-Allow-Origin": "*" 到响应 header:

@POST
@Path(value = "auth")
@Consumes(MediaType.APPLICATION_JSON + ";charset=utf-8")
@Produces(MediaType.APPLICATION_JSON + ";charset=utf-8")
public Response getUserWithNicknameAndPassword(Map<String, String> nicknameAndPassword) {
    String nickname = nicknameAndPassword.get("nickname");
    String password = nicknameAndPassword.get("password");
    return Response.ok()
                .entity(new UserController.getUserWithNicknameAndPassword(nickname, password))
                .header("Access-Control-Allow-Origin", "*")
                .header("Access-Control-Allow-Methods", "POST, GET, PUT, UPDATE, OPTIONS")
                .header("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With")
                .build();   
}

但是当调用 angular 登录方法时，我在浏览器控制台中收到此错误：

 OPTIONS http://localhost:8080/SRK/rest/users/auth 403

 Access to XMLHttpRequest at 'http://localhost:8080/SRK/rest/users/auth' 
 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.

我的 WEB-INF/web.xml 包含这个：

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
    <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

我尝试在 chrome 中安装 "access-control-allow-origin" chrome 插件和运行 angular 应用程序，但同样的错误。

当我将 angular 应用程序构建到生产环境并添加到 WebApp 文件夹时，一切正常。我真的不知道问题出在哪里。感谢您的帮助。

已解决

我创建了 proxy.config.json，其中包括：

{
  "/rest/*":{
    "target": "http://localhost:8080/SRK",
    "secure": false,
    "changeOrigin": true
  }
}

anglar post 方法中的 URI 现在更短了：

this.http.post<User>(
 /rest/users/auth",
 JSON.stringify(data),
 this.httpOptions
).subscribe((user : User) => { console.log(user); this.user = user; });

我编辑了 package.json:

"scripts": {
  ...
  "start": "ng serve --proxy-config proxy.config.json",
  ...
},

现在我运行 angular 应用程序通过命令 npm start 而不是 ng serve.

感谢您的帮助。

Answer 1

在 C# 中，我们执行以下操作。请检查 java 等效项并写入您的服务器端 API 代码。在 WebAPIConfig 文件中添加命名空间使用 System.Web.Http.Cors;

然后在Register方法中添加如下一行代码： config.EnableCors(new EnableCorsAttribute("http://localhost:8080", headers: "", 方法: ""));

这将使其余 API 接受 CORS 调用。

Answer 2

您的服务器在响应中应该有类似 Access-Control-Allow-Origin: * header 的内容。

Answer 3

你可以解决它总是发送 Access-Control-Allow-Origin header (How to handle CORS using JAX-RS with Jersey) 或者你可以包括像 nginx 这样的服务器来为你执行反向代理，从而消除对 header

更新：

抱歉回复晚了，但您可以在这里找到 nginx 文档：https://docs.nginx.com/?_ga=2.134190344.721047093.1546535765-158692192.1546535765

此外，您需要更改 nginx.conf 以包含如下内容：

location /<location_you_wish_for_your_proxy> {
        proxy_pass <your_back_endend_server_location_including_port_and_path>;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
}

'Access-Control-Allow-Origin' 在开发 Angular7 REST 网络应用程序时出现问题

Problem with 'Access-Control-Allow-Origin' while developing Angular7 REST web app

java

rest

tomcat

jersey-2.0

angular7