Ошибка CORS при отправке данных в JAVA post REST API в Angular 4

Question

Я отправляю данные реактивной формы через почтовый запрос в java restful web api, но он показывает ошибку CORS, хотя в GET-запросе все работает нормально. Я уже установил заголовок CORS в ответ на остальные API.

Угловой код обслуживания:

 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();
       }

Описание заголовка: введите описание изображения здесь, я думаю, что когда мы отправляем данные в остальные API, нам нужно установить в качестве исходного заголовка CORS наш угловой код. Как я могу это сделать?

Answer 1

Нам нужно добавить фильтр для входящего запроса, как показано ниже:

Создайте фильтр 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>

Answer 2

Вы можете решить эту проблему, используя аннотацию в объявлении класса контроллера.

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

Answer 3

Вы можете сделать это без изменения серверной части, запустив Angular с конфигурацией прокси. Подробнее здесь.

В двух словах:

1. Измени свой baseUrlпорт на 4200 (или на том, на котором работает ваше приложение Angular):

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

2. Создайте файл proxy.conf.json в корне вашего проекта Angular с содержимым:

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

3. Запустите приложение Angular с ng serve --proxy-config proxy.conf.json

На этом этапе ваше приложение работает на порте 4200, и когда вы пытаетесь подключиться к конечной точке, содержащей /userInformationон перехватывает URL-адрес и отправляет его целевому объекту, указанному в конфигурации прокси-сервера, а также остальной путь, поэтому http://127.0.0.1:8080/userInformation/rest/UserService/addUser. Кстати, если ваша конечная точка не подключена к бэкэнду, консоль разработчика браузера будет жаловаться на эту конечную точку на порту 4200, но вызов действительно перешел на 8080.