javascript - control - Deployd-Datos recuperados a través de CORS AngularJS

access control allow origin

Question

Actualmente estoy leyendo a través de "Pro AngularJS" de Adam Freeman. Al examinar los ejemplos, le pide al lector que cree una aplicación de tienda deportiva usando Angular (por supuesto) con un recurso de servidor Deployd. El recurso Deployd está configurado para devolver datos JSON que se completarán en el modelo. Estoy usando NodeJS para ejecutar mi servidor. Actualmente está configurado en el puerto 5000 ( http://localhost:5000/sportsstore/app.html ). El recurso de Deployd se está ejecutando en el puerto 5500 ( http://localhost:5500/products ). Al presionar Deployd, la respuesta es la siguiente:

[
    { "name": "Kayak", "description": "A boat for one person", "category": "Watersports", "price": 275, "id": "a1c999fc248b2959" },
    { "name": "Lifejacket", "description": "Protective and fashionable", "category": "Watersports", "price": 48.95, "id": "61303717cfad182e" },
    { "name": "Soccer Ball", "description": "FIFA-approved size and weight", "category": "Soccer", "price": 19.5, "id": "0fb5f67bdcbd992f" },
    { "name": "Corner Flags", "description": "Give your playing field a professional touch", "category": "Soccer", "price": 34.95, "id": "24385d315dd388b4" },
    { "name": "Stadium", "description": "Flat-packed 35,000-seat stadium", "category": "Soccer", "price": 79500, "id": "500fb6805905a856" },
    { "name": "Thinking Cap", "description": "Improve your brain efficiency by 75%", "category": "Chess", "price": 16, "id": "637d8a1f42e6fa1c" },
    { "name": "Unsteady Chair", "description": "Secretly give your opponent a disadvantage", "category": "Chess", "price": 29.95, "id": "73393312ec7dfab7" },
    { "name": "Human Chess Board", "description": "A fun game for the family", "category": "Chess", "price": 75, "id": "7871d02a662b0915" },
    { "name": "Bling-Bling King", "description": "Gold plated, diamon-studded King", "category": "Chess", "price": 1200, "id": "b59a3389a0e248bd" }
]

Estoy tratando de recuperar esta información mediante el uso de $http.get :

$http.get("http://localhost:5500/products")
    .success(function (data) { ... })
    .error(function (error) { ... });

Sin embargo, esto sigue devolviendo un error:

XMLHttpRequest cannot load http://localhost:5500/products. No ''Access-Control-Allow-Origin'' header is present on the requested resource. Origin ''http://localhost:5000'' is therefore not allowed access. 

La investigación muestra que hay / hubo algunos problemas con Angular y CORS, y que los encabezados tenían que configurarse para ejecutar solicitudes entre dominios. Como resultado, agregué lo siguiente a mi app.config:

$http.defaults.useXDomain = true;
delete $http.defaults.headers.common[''X-Requested-With'']; // this isn''t needed anymore, but was put here as a just-in-case

A pesar de que se agregaron estas configuraciones, sigo recibiendo el error. La documentación de Deployd dice que se configura automáticamente para CORS ( solicitudes de origen cruzado ) y enviará la información de encabezado apropiada siempre que la solicitud no contenga encabezados personalizados no válidos. Estoy bastante seguro de que mi solicitud no contiene encabezados personalizados no válidos:

Accept: application/json, text/plain, */*
Cache-Control: max-age=0
Origin: http://localhost:5000
Referer: http://localhost:5000/sportsstore/app.html
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.131 Safari/537.36

Mi pregunta: ¿Hay alguna otra configuración que deba implementar para que Deployd esté configurado para permitir que se procese la solicitud de CORS? El libro no especifica ninguna de las configuraciones especiales del encabezado angular o cualquier otra cosa.

Answer 1

Lo que hice para resolver ese problema fue iniciar Chrome con la bandera "--disable-web-security". Pero primero vaya al Administrador de tareas y cierre cada proceso de Chrome que tenga allí.

Answer 2

Puede colocar sus archivos (app.html, sportStore.js, ...) en la carpeta pública de su proyecto deployd y usar la siguiente URL http://localhost:5500/app.html

Answer 3

Simplemente ejecute "npm update" en su carpeta de instalación deployd y se asegurará de que esté actualizado a la última versión 0.6.10. Esto resolvió el problema para mí después de leer las respuestas de javaauthority (Gracias por eso :)).

Answer 4

Bic, actualice su versión de deployd a la versión 0.6.10. Esto hizo el truco para mí. Ahora pude procesar una solicitud de obtención. No parece que sea un error con el código AngularJS ni con el libro de Adam Freeman.

En el libro, menciona que incluye el programa deployd con la descarga del código fuente en http://www.apress.com/9781430264484 . Esa es la versión 0.6.9. Estoy seguro de que funciona bien con eso. Será más fácil que tratar de encontrar la versión 0.6.10 ... que es lo que hice. Si quieres esa versión, aquí está:

https://www.versioneye.com/nodejs/deployd/0.6.10

No es un instalador, así que tendrás que pegarlo en tu directorio deployd, reemplazando node_modules .

Answer 5

Utilicé fiddler para modificar las respuestas de deployd. Este enlace mostrará cómo agregar una regla personalizada a fiddler para agregar el encabezado Access-Control-Allow-Origin: * a todas las respuestas. Funciona muy bien.

http://www.leggetter.co.uk/2010/03/19/using-fiddler-to-help-develop-cross-domain-capable-javascript-web-applications.html

Answer 6

Angular también envía encabezados personalizados que DPD rechaza, ponga esto en su código para dev para eliminarlos y DPD funcionará:

delete $http.defaults.headers.common[''X-Requested-With''];

Answer 7

Si bien proporcioné la respuesta correcta y otros la han mejorado, ¿qué sucede si no está utilizando el servidor web Deployd mencionado en el libro? Estoy usando Wildfly (JBOSS 8.X) y tuve que hacer que el problema CORS funcionara. Creé una clase simple de Java llamada CorsFilter. Las importaciones deberían ser bastante fáciles de encontrar si está ejecutando Wildfly.

Espero que esto ayude a otras personas que están teniendo problemas similares con diferentes servidores web.

Tenga en cuenta: responseContext.getHeaders (). Add ("Access-Control-Allow-Origin", "*");

Observe el * en la línea de arriba? Esto permitiría que CUALQUIER solicitud tenga éxito. Esto generalmente es bueno para el trabajo de desarrollo local, pero se deben implementar controles de seguridad más estrictos para los entornos de producción / estadificación. Por ejemplo, solo puede aceptar solicitudes de una determinada dirección IP.

import org.jboss.resteasy.annotations.interception.HeaderDecoratorPrecedence;
import org.jboss.resteasy.annotations.interception.ServerInterceptor;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.ws.rs.container.ContainerRequestContext;
import javax.ws.rs.container.ContainerResponseContext;
import javax.ws.rs.container.ContainerResponseFilter;
import javax.ws.rs.ext.Provider;
import java.io.IOException;

/**
 * Class to .
 * User: Java Authority
 * Date: 12/6/2014
 * Time: 12:38 PM
 */
@Provider
@ServerInterceptor
@HeaderDecoratorPrecedence
@WebFilter
public class CorsFilter implements ContainerResponseFilter {

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest r = (HttpServletRequest)request;
        HttpServletResponse s = (HttpServletResponse)response;
        chain.doFilter(request, response);
    }


    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {
        responseContext.getHeaders().add("Access-Control-Allow-Origin", "*");
        responseContext.getHeaders().add("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    }
}