Missing Access-Control-Allow-Origin header on preflight requests #2208
Description
Cross origin requests that make preflight OPTIONS requests fail on missing ‘Access-Control-Allow-Origin' header. The Angular HTTPClient makes an OPTIONS request to check CORS and acceptable methods prior to sending a payload, in this case a PUT request. The @RepositoryRestResource appears to not respond to these requests even when CORS is enabled with the @Cross-Origin, and thus fails CORS requests that should otherwise be possible.
@RepositoryRestResource(path = "staff", collectionResourceRel = "staff")
@CrossOrigin
public interface StaffRepository extends CrudRepository<Staff, Long> {
List<Staff> findByLastName(String lastName);
}Frontend Request Code:
import HttpClient from "@angular/common/http";
@Injectable({ providedIn: 'root' })
export class StaffService {
private staffUrl = 'http://localhost:8080/staff'; // URL to web api
httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
constructor(private http: HttpClient) { }
/** PUT: update the staff on the server */
updateStaff(staff: Staff): Observable<any> {
return this.http.put(this.staffUrl, staff).pipe(
catchError(this.handleError<any>('updatestaff'))
);
}Console Log:
XHROPTIONShttp://localhost:8080/staff
CORS Missing Allow Origin
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/staff. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 403.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/staff. (Reason: CORS request did not succeed). Status code: (null).