api - Aurelia Post con http-fetch-client produciendo una solicitud de opciones

cors options

Question

Estoy creando un pequeño foro donde las personas de nuestra compañía pueden publicar anuncios de bienes o servicios que desean vender sobre la marcha, utilizando aurelia. Tengo una lista de la página de anuncios que funciona bien, una página de detalles para cada anuncio que funciona bien tanto al usar las solicitudes de obtención de una API. Sin embargo, parece que no puedo obtener el trabajo que el Post requiere cuando alguien quiere agregar un comentario en un anuncio.

@inject(HttpClient)
export class ApiData {
    constructor(httpClient) {
        httpClient.configure(config => {
            config
                .withBaseUrl("MyUrl");
        });
        this.http = httpClient;
        //.configure(x => {x.withHeader(''Content-Type'', ''application/json'');});
    }

    postAdvertComment(comment, id) {
        return this.http.fetch(`/adverts/${id}/comments`, {
            method: "post",
            body: json(comment),
            headers: {
                ''Accept'': ''application/json''
            }
        });
    } 

    getAdverts() {
        return this.http.fetch("/adverts")
            .then(response => {
                return this.adverts = response.json();
            });
    }

    getAdvert(id) {
        return this.http.fetch(`/adverts/${id}`)
            .then(response => {
                return this.advert = response.json();
            });
    }
}

Al hacer este proyecto, hemos tenido algún problema con CORS, todo solucionado al agregar etiquetas AllowCors en la API, incluidos todos los métodos, etc.

<add key="CorsAllowedOrigins" value="*" />
<add key="CorsAllowedHeaders" value="" />
<add key="CorsAllowedMethods" value="*" />

Sin embargo, cuando intento ejecutar la publicación, se ejecuta un método de opciones y devuelve una solicitud 400 Bad. aquí

También obtenemos el siguiente error CORS:

Fetch API cannot load MyURL/api/adverts/2/comments. Response to preflight
request doesn''t pass access control check: No ''Access-Control-Allow-Origin''
header is present on the requested resource. Origin ''http://localhost:49877'' is 
therefore not allowed access. The response had HTTP status code 400. If an 
opaque response serves your needs, set the request''s mode to ''no-cors'' to fetch 
the resource with CORS disabled.

No sé si es un problema con nuestra api de c # o con la forma en que estoy tratando de publicar de aurelia, pero hemos intentado enviar solicitudes de cartero y funciona bien, intenté enviar una solicitud de publicación dentro de la misma aplicación usando jquery y funciona bien, y todas las solicitudes de obtención funcionan bien, pero por alguna razón esta publicación está causando todo tipo de problemas.

Answer 1

Parece ser un problema en su WebAPI, pero antes de darle algunas soluciones posibles, me gustaría mostrarle algunas cosas importantes.

• El cartero no se ve afectado por CORS, por lo que todas las solicitudes funcionan.
• jQuery ajax usa XHR (objeto XmlHttpRequest ) mientras que aurelia-fetch-client usa fetch ( window.fetch . Sin embargo, fetch-polyfill usa XHR en el fondo). Son diferentes enfoques para resolver el mismo problema. El hecho de que uno de ellos funcione, en realidad no significa que el otro debería funcionar también.
• La solicitud de OPCIONES se realiza mediante fetch, así es como funciona. Más información aquí https://developers.google.com/web/updates/2015/03/introduction-to-fetch?hl=en

Para resolver este problema, intente eliminar esas etiquetas de web.config y permita CORS en su Startup.cs . Me gusta esto:

public void Configuration(IAppBuilder app)
{
    app.UseCors(CorsOptions.AllowAll); //or another parameter
    //rest of your code
}

No tiene que configurar el encabezado de tipo de contenido para application / json. Se crea automáticamente cuando usa la función json() ---> body: json(comment)

Si está utilizando OWIN, es posible que deba enviar el tipo de contenido como x-www-form-urlenconded. En ese caso, eche un vistazo a este post ''x-www-form-urlencoded'' contenido con aurelia-fetch-client