在Angular 4中将数据发送到JAVA post REST API时出现CORS错误

Posted

技术标签:

【中文标题】在Angular 4中将数据发送到JAVA post REST API时出现CORS错误【英文标题】:Getting CORS error when sending data to JAVA post REST API in Angular 4 【发布时间】:2018-06-29 06:29:13 【问题描述】:

我正在通过 post 请求向 java restful web api 发送响应式表单数据,但它向我显示 CORS 错误虽然在 GET 请求中同样工作正常。我已经设置了 CORS 标头以响应 rest api。

Angular 服务代码:

 private headers = new Headers( 'Content-Type': 'application/json');
    baseURL='http://127.0.0.1:8080/userInformation/rest/UserService';
    addData(formdata: any)
        var body = JSON.stringify(formdata);
           return this.http.post(this.baseURL+'/adduser',body)
                            .subscribe(
                           res => 
                            console.log(res);
                         ,
                      err => 
                        console.log('Error occured');
                      
          );


  

JAVA Rest API 代码:

       @POST
       @Produces(MediaType.APPLICATION_JSON)
       @Consumes(MediaType.APPLICATION_JSON)
       @Path("/adduser")
       public Response createUser(String val)  
           Gson gson = new Gson();
           User user = gson.fromJson(val, User.class);
           userDao.insertUser(user);
           String result="SUCCESS";
           return Response.ok().entity(result)
                    .header("Access-Control-Allow-Origin", "*")
                    .header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS, HEAD")
                    .build();
       

标题说明: enter image description here 我认为当我们将数据发送到rest api时,我们需要将CORS源头设置为我们的角度代码。我该怎么做?

【问题讨论】:

这是确切的错误:对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。 您真的是指CORS 错误吗?我想你会的。 您收到403 响应状态码了吗?另请参阅此帖子的答案***.com/questions/46788969/… 不,我收到错误代码 500。对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,Origin 'localhost:4200' 不允许访问。响应的 HTTP 状态代码为 500。 【参考方案1】:

您可以通过在 Controller 类声明上使用注解来解决它。

@RestController
@CrossOrigin(origins = "*", maxAge = 3600)
@RequestMapping( "/controller" )
public class Controller 

【讨论】:

【参考方案2】:

您可以在不更改后端的情况下通过运行带有 proxy 配置的 Angular 来做到这一点。更多详情here。

简而言之

    baseUrl 的端口更改为 4200(或任何运行 Angular 应用程序的端口):

    baseURL = 'http://127.0.0.1:4200/userInformation/rest/UserService';
    

    在您的 Angular 项目的根目录中创建一个 proxy.conf.json 文件,其内容为:

    
      "/userInformation": 
        "target": "http://127.0.0.1:8080",
        "secure": false
      
    
    

    使用 ng serve --proxy-config proxy.conf.json 运行 Angular 应用程序

此时您的应用程序在端口 4200 上运行,当您尝试访问包含 /userInformation 的端点时,它会劫持 URL 并将其发送到您在代理配置中设置的目标以及路径的其余部分,所以 @ 987654322@。顺便说一句,如果您的端点不在您的后端,浏览器开发控制台会在端口 4200 上抱怨该端点,但调用确实转到了 8080。

【讨论】:

【参考方案3】:

我们需要为传入请求添加过滤器,如下所示:

创建一个过滤器CrossOrigin如下:

import com.sun.jersey.spi.container.ContainerRequest;
import com.sun.jersey.spi.container.ContainerResponse;
import com.sun.jersey.spi.container.ContainerResponseFilter;

public class CrossOrigin implements ContainerResponseFilter 

     @Override
        public ContainerResponse filter(ContainerRequest creq, ContainerResponse cresp) 

            cresp.getHttpHeaders().putSingle("Access-Control-Allow-Origin", "*");
            cresp.getHttpHeaders().putSingle("Access-Control-Allow-Credentials", "true");
            cresp.getHttpHeaders().putSingle("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS, HEAD");
            cresp.getHttpHeaders().putSingle("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With");

            return cresp;
        

然后在 web.xml 中注册:

    <servlet>
        <servlet-name>Jersey RESTful Application</servlet-name>
        <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
        <init-param>
          <param-name>jersey.config.server.provider.packages</param-name>
          <param-value>com.newgen.ap2</param-value>
        </init-param>
        <init-param>
        <param-name>com.sun.jersey.spi.container.ContainerResponseFilters</param-name>
        <param-value>com.newgen.ap2.CrossOrigin</param-value>
     </init-param>

  </servlet>

【讨论】:

以上是关于在Angular 4中将数据发送到JAVA post REST API时出现CORS错误的主要内容,如果未能解决你的问题,请参考以下文章

Angular 8在两个组件之间发送数据[重复]

我如何在 Angular 中写博客组件?

如何在Angular 4中将值从子组件传递到父组件

如何在Angular中将表单数据从子组件传输到父组件

在 Angular 6 中将 CORS 标头添加到响应中

在离子中将角度 5 降级为 4.3.3 [重复]