CORS-Uso de AJAX para publicar en un servicio web de Python(webapp2)

google-app-engine jquery

Question

Esto va a ser largo:

Ok, estoy desarrollando un gadget de calendario de Google que envía solicitudes a una API REST de pyba webapp2 alojada en Google App Engine.

El problema surge cuando trato de PUBLICAR algo que no me permite debido a CORS. En las DevTools de Chromes dice:

Method: OPTIONS.

Status: (failed) Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

Origin https://hq34i4geprnp5vci191ljfuhcoerscl4-a-calendar-opensocial.googleusercontent.com is not allowed by Access-Control-Allow-Origin. 

Soy consciente de que esto se debe a CORS. Aquí:

Ajax - ''Localhost de origen no está permitido por Access-Control-Allow-Origin''

Dice que tengo que agregar

Access-Control-Allow-Origin: *

A los encabezados, pero de nuevo soy nuevo en ajax y me pregunto si se hará de esta manera:

    $.ajax({
        type: "POST",
        url: "https://myapp.appspot.com/service",
        contentType: "application/json; charset=utf-8",
        data: data,
        beforeSend: function (request)
        {
            request.setRequestHeader("Access-Control-Allow-Origin", "*");
        }
        success: function(data) {
              alert("AJAX done");
        }
    });

Al agregar estos encabezados, la salida es diferente (lo que me hace preguntarme si se permitió el origen, aunque realmente no lo sé):

Method: OPTIONS.

Status: (failed) Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

XMLHttpRequest cannot load https://myapp.appspot.com/service. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers. 

Incluso he encontrado esto:

http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/

Lo que me permite hacer solicitudes GET, pero me gustaría aprender cómo hacerlas sin esto.

También en mi servidor web tengo esto:

...
    class webService(webapp2.RequestHandler):
         options(self):
               self.response.write(''options'')

         post(self):
               self.response.write(''post'')

    application = webapp2.WSGIApplication([
        (''/'', MainPage),
        (''/service'', webService)
    ], debug=True)

No sé si debo agregar algo más al servidor web, ni he encontrado información que diga que tengo que hacerlo. También creo que estoy cerca de lograr la solicitud de CORS, pero no puedo encontrar EL EJEMPLO que lo explique todo.

Por favor ayuda.

Answer 1

Ok lo arreglé

En primer lugar, me di cuenta de que los encabezados fueron enviados por el servidor, así que estaba haciendo mal al enviar esos encabezados en la solicitud de AJAX.

Finalmente, después de buscar en la red mundial encontré lo que me estaba perdiendo. Fue algo estúpido. Encontré la página que lo solucionó todo:

http://enable-cors.org/server_appengine.html

Así que finalmente todo se ve así:

$.ajax({
    type: "POST",
    url: "https://myapp.appspot.com/service",
    contentType: "application/json; charset=utf-8",
    data: data,
    success: function(data) {
        alert("AJAX done");
    }
});  

Y en el servicio web:

class webService(webapp2.RequestHandler):

    def get(self):      
        self.response.headers.add_header(''Access-Control-Allow-Origin'', ''*'')
        self.response.headers[''Content-Type''] = ''application/json''
        # do something

    def post(self):     
        self.response.headers.add_header(''Access-Control-Allow-Origin'', ''*'')
        self.response.headers[''Content-Type''] = ''application/json''
        # do something

    def options(self):      
        self.response.headers[''Access-Control-Allow-Origin''] = ''*''
        self.response.headers[''Access-Control-Allow-Headers''] = ''Origin, X-Requested-With, Content-Type, Accept''
        self.response.headers[''Access-Control-Allow-Methods''] = ''POST, GET, PUT, DELETE''

Answer 2

Solo quiero señalar un detalle que podría ayudar a otros:

Los navegadores difieren en cómo manejan el encabezado "Access-Control-Allow-Orgin". Por ejemplo, descubrí que Chrome bloquea publicaciones de dominios cruzados cuando el valor del encabezado es un comodín (*) como en el código de solución anterior. Lo considera demasiado liberal y quiere un origen específico. Sin embargo, a otros navegadores como IE y Firefox no les importaba.

Por lo tanto, si desea crear una solución de navegador cruzado, lo mejor sería establecer el valor de "Access-Control-Allow-Origin" en el valor de origen enviado con la solicitud.

Si usa SSL, encontrará otras diferencias que también deberán probarse.

Y si necesita una solución liviana, todo esto se puede hacer con POJS (plain-old-JavaScript) sin recurrir a jQuery. Simplemente conecte la ventana. XDomainRequest para IE8 + y la ventana.XMLHttpRequest para otros navegadores y usted está en el negocio.

Answer 3

Puede ser más sencillo con el método de despacho

class BaseRequestHandler(webapp2.RequestHandler):
    def dispatch(self):
        self.response.headers.add_header(''Access-Control-Allow-Origin'', ''*'')
        self.response.headers.add_header(''Access-Control-Allow-Headers'', ''Content-Type'')
        webapp2.RequestHandler.dispatch(self)

class LoginHandler(BaseRequestHandler):
    def login(self):
        #code here