Angular 应用程序和标题问题（CORS 相关）

Question

我有一个应用程序需要显示带有数据库中自定义点的地图。对于前端，我有一个非常简单的地图，它尝试与读取点并生成 JSON 字符串的 Web 服务进行通信。该服务运行良好（它是在 jboss 上开发的），并且如果我禁用 CORS，地图会显示点（我正在使用带有禁用 CORS 的扩展名的 Chrome）。如果没有，我会收到错误消息“请求的资源上不存在‘Access-Control-Allow-Origin’标头。”。但我想修复它并让应用程序完全运行。

我在java服务上添加了头文件，但我不知道是否必须在Angular.app上添加这个。

DispatcherServlet.java（服务）的代码

package com.parkfind.server;

import java.io.IOException;
import java.util.ArrayList;

import javax.ejb.EJB;
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 org.apache.log4j.Logger;

import com.parkfind.servicios.AppServiceRemote;

@WebServlet("/DispatcherServlet")
public class DispatcherServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public static final Logger LOG = Logger.getLogger(DispatcherServlet.class);

    @EJB
    AppServiceRemote servicio;

    public DispatcherServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        LOG.info("Accedido a Servlet");
        String accion = request.getParameter("accion");
        String datosJSON = new String();

        try {

            if(accion.equals("getDatosUsuario"))
            {
                int id = Integer.parseInt(request.getParameter("idUser").equals("")?"0":request.getParameter("idUser"));
                String login = request.getParameter("login");
                String nombre = request.getParameter("nombres");
                String apPaterno = request.getParameter("ap_parterno");
                String apMaterno = request.getParameter("ap_materno");

                datosJSON = servicio.getDatosUsuario(id, login, nombre, apPaterno, apMaterno);
            }
            else if(accion.equals("borrarUsuario"))
            {
                int idUsuario = Integer.parseInt(request.getParameter("idUsuario"));
                datosJSON = servicio.borrarUsuario(idUsuario);
            }
            else if(accion.equals("ingresarUsuario"))
            {
                String username = request.getParameter("username");
                String password = request.getParameter("password");
                String nombre = request.getParameter("nombre");
                String ap_parterno = request.getParameter("ap_paterno");
                String ap_marterno = request.getParameter("ap_materno");
                String email = request.getParameter("email");
                int fono = Integer.parseInt(request.getParameter("fono"));
                String direccion = request.getParameter("direccion");
                String comuna = request.getParameter("comuna");

                datosJSON = servicio.ingresarUsuario(username,password, nombre,ap_parterno ,ap_marterno ,email, fono, direccion,comuna);
            }
            else if(accion.equals("ingresarEstacionamiento"))
            {
                String direccion = request.getParameter("direccion");
                int comuna = Integer.parseInt(request.getParameter("comuna"));
                double coordenada_x = Double.parseDouble(request.getParameter("x"));
                double coordenada_y = Double.parseDouble(request.getParameter("y"));
                int dimension = Integer.parseInt(request.getParameter("dimension"));
                String tipo = request.getParameter("tipo");
                int modalidad = Integer.parseInt(request.getParameter("modalidad"));
                int costo = Integer.parseInt(request.getParameter("costo"));
                int idUser = Integer.parseInt(request.getParameter("idUser"));

                datosJSON = servicio.ingresarEstacionamiento(direccion, comuna, coordenada_x, coordenada_y, dimension, tipo, modalidad, costo, idUser);
            }
            else if(accion.equals("listarEstacionamientos"))
            {
                datosJSON = servicio.listarEstacionamientos();
            }
            else
            {
                LOG.error("Error: Acción no existe");
                throw new Exception("Error: Acción no existe");
            }

            response.setContentType("application/json");
            response.setCharacterEncoding("utf8");
            response.setHeader("cache-control", "no-cache, no-store");
            response.setHeader("Pragma", "no-cache");

            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
            response.setHeader("Access-Control-Allow-Headers", "Content-Type");

            response.getWriter().write(datosJSON);

        } catch (Exception e) {
            LOG.error("Error en invocacion EJB: " + e.getMessage());
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

maps.js 代码

//Angular App Module and Controller
      var sampleApp = angular.module('mapsApp', []);
      sampleApp.controller('MapCtrl', function ($scope, $http) {

        var mapOptions = {
              zoom: 12,
              center: new google.maps.LatLng(-33.033333333333,-71.533333333333),
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }

          $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

          $scope.markers = [];

          var infoWindow = new google.maps.InfoWindow();

          var createMarker = function (info){

              est = JSON.parse(info);

              var marker = new google.maps.Marker({
                  map: $scope.map,
                  position: new google.maps.LatLng(est.coordenada_x, est.coordenada_y),
                  title: "$ " + est.costo
              });

              marker.content = '<div class="infoWindowContent">' + est.direccion + '</div>';

              google.maps.event.addListener(marker, 'click', function(){
                  infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
                  infoWindow.open($scope.map, marker);
              });

              $scope.markers.push(marker);

          }


        $scope.openInfoWindow = function(e, selectedMarker){
              e.preventDefault();
              google.maps.event.trigger(selectedMarker, 'click');
          }

        // Obteniendo estacionamientos desde la BD
        var estacionamientos = null;

        $http.get('http://parkfind.ddns.net:8080/parkfind-web/DispatcherServlet?accion=listarEstacionamientos').success(function(data,{}, header) {
            estacionamientos = data;
    console.log(header);
    console.log(estacionamientos);
          for (i = 0; i < estacionamientos.length; i++){
              createMarker(estacionamientos[i]);
          }
        });
      });

mapa2.html（在我展示地图的地方）

<!DOCTYPE html>
<html ng-app="mapsApp">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/maps.css">
<script
  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script
  src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en&key=AIzaSyAqHxheQT_oNchlOOqL2fvwKO7lEnS-TPc"></script>
  <script type="text/javascript" src="../js/maps.js"></script>
</head>
<body>
<div ng-controller="MapCtrl">
    <div id="map"></div>
</div>
</body>
</html>

服务：http://parkfind.ddns.net:8080/parkfind-web/DispatcherServlet?accion=listarEstacionamientos 地图前端：http://parkfind.ddns.net/web_SW/pages/mapa2.html

我认为问题出在 Angular 应用程序上，因为如果我看到 Chrome 网络选项卡，servlet 会发送标头。但我迷路了。 提前致谢！

Answer 1

我以前从未真正做过任何 JBoss 开发，但我知道 CORS 工作流程。浏览器会在发出 GET 请求之前向端点发送一个 OPTIONS HTTP 请求。您可以尝试将以下方法添加到 DispatcherServlet 类以响应 OPTIONS 调用。然后浏览器应该很乐意发出 CORS 请求。

protected void doOptions(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");   
    response.setHeader("Access-Control-Allow-Headers", "Content-Type");
    response.setStatus(HttpServletResponse.SC_OK);
}

注意：可能有更好的方法来做\配置它，不需要您响应应用程序代码中的 CORS OPTIONS 调用（Tomcat 提供了一个 org.apache.catalina.filters.CorsFilter 可用于自动为你做这个）

注意 2：如果您计划执行“凭据”请求，则需要在 Access-Control-Allow-Origin 中返回确切的主机，而不是 *。见this stack overflow answer或Mozilla Documentation