I'm using Aurelia Fetch Client to query my own Slim Framework RESTful API. The API includes the correct header (as verified by Postman):
Access-Control-Allow-Headers →X-Requested-With, Content-Type, Accept, Origin, Authorization
Access-Control-Allow-Methods →GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin →*
Cache-Control →no-store, no-cache, must-revalidate, post-check=0, pre- check=0
Connection →close
Content-Type →application/json;charset=utf-8
Expires →Thu, 19 Nov 1981 08:52:00 GMT
Host →localhost:8080
Pragma →no-cache
X-Powered-By →PHP/5.6.19
However, I'm getting the following error in the Javascript console:
Fetch API cannot load http://localhost:8080/api/v1/calendar/2. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
If I use the CORS extension for Google Chrome, I can connect successfully. (However, a secondary problem is that the CORS extension seems to be killing the response status code, changing everything to 200 even when my API returns 403 or 500.)
My Aurelia code is:
saveCalendar() {
this.httpClient.fetch('http://localhost:8080/api/v1/calendar/2', {
method: 'post',
body: json(data)
}).then(response => {
window.alert("Got a response: " + response.status);
if (response.status == 200) { // OK
window.alert("Calendar saved!");
} else { // Error
window.alert("Error");
}
});
this.getCalendars();
}
Why isn't Access-Control-Allow-Origin: * allowing me access from anywhere?
=== Edit:
After more careful observation, I see that Aurelia and Fetch are making 2 requests. The preflight request OPTIONS seems to go fine and receives the CORS Access-Control-Allow-Origin: * header in the response. However, in the actual POST request, the API is not returning anything. The POST request headers are as follows:
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8,es-419;q=0.6,es;q=0.4,gl;q=0.2
Cache-Control:no-cache
Connection:keep-alive
Content-Length:142
content-type:application/json
Host:localhost:8080
Origin:http://localhost:9000
Pragma:no-cache
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.59 Safari/537.36
When I copy these headers into Postman to make the same request, it also fails in the same way. But, if I remove one of the headers (content-type:application/json), it works.
The actual request in my Aurelia code looks like this:
// src/common/api.js
import { inject } from 'aurelia-dependency-injection';
import 'fetch';
import { HttpClient, json } from 'aurelia-fetch-client';
@inject(HttpClient)
export class API {
constructor(httpClient) {
httpClient.configure(config => {
config
.withBaseUrl('http://localhost:8080/api/v1');
.withDefaults({
mode: 'cors',
headers: {
'Accept': 'application/json'
'Content-type' : 'application/json'
}
});
});
this.httpClient = httpClient;
}
getData(url) {
return this.httpClient.fetch(url)
.then(response => response.json());
}
postData(url, data) {
return this.httpClient.fetch(url, {
method: 'post',
body: json(data)
});
}
}
It would seem obvious to remove the 'Content-type' : 'application/json' from the Aurelia API client Fetch config, but even when I do, it still sends the header.
So my new questions are: 1. How do I prevent Aurelia from sending this header? 2. OR... Why is Slim dying when receiving this header? 3. Is there anything else wrong with my code?
