I am working on a Laravel API, and a angularJS front end application.
I am trying to make request against my API but I keep having problems with this message in my Google Chrome Console:
XMLHttpRequest cannot load http://larashop.dev/api/authenticate. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.
Here is a screenshot from my network tab with the response header:
So, I don't understand because I can see the "Access-Control-Allow-Origin:*". Here is my .htaccess file on my server:
<IfModule mod_headers.c>
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
</IfModule>
I really don't know where to look at to solve the problem. What do I miss?
I also use satellizer with Angular in order to handle authentication
Thanks for the help :)
Related
This question already has answers here:
Authorization against REST API throws an error: 401 (No credentials found the request.)
(2 answers)
Apache Configure CORS Headers for Whitelist Routes
(1 answer)
How to CORS-enable Apache web server (including preflight and custom headers)?
(1 answer)
Closed 2 years ago.
The following error is from the Network section of firefox:
I've tried solving the above error by adding a headers (based on various answers from similar problems) property in the native fetch function when sending a React API request (or a native ES6 request for that matter).
fetch('API_ENDPOINT', // API_ENDPOINT is a different sub-domain
{
method: 'POST',
headers: {
'Authorization' : 'Basic XXXXXXXXXX'
},
body: JSON.stringify(body)
}
).then(...);
Removing the headers section allows the request to go through (I have validated this by returning a custom message in the response header) but I need this to add the Authorization header because I authenticate the request via the Basic token (I will migrate to Bearer soon but the same approach will be used). It looks like the initial set of headers are being replaced once I've added the headers property?
Note: I have an .htaccess that allows cross-origin request with definition:
<IfModule mod_headers.c>
Header add Access-Control-Allow-Methods "PUT,GET,POST,DELETE,OPTIONS"
Header add Access-Control-Allow-Credentials "true"
Header add Access-Control-Allow-Headers "Content-Type, Authorization, Access-Control-Allow-Credentials, Access-Control-Allow-Origin, Access-Control-Allow-Methods"
Header add Access-Control-Allow-Origin "*"
</IfModule>
SOLVED:
This has been solved by implementing this answer: https://stackoverflow.com/a/42558499/335547
The credentials should be included as fetch property so the Authorization header will be considered in the preflight validation.
The API should use Access-Control-Allow-Origin with specific source host, not "*"
The API should use of Access-Control-Allow-Credentials "true"
As far as I known, when you defined Access-Control-Allow-Credentials "true" you cant specify Access-Control-Allow-Origin "*", you have to define Access-Control-Allow-Origin as a specific list of urls
I have an API running on Spring Boot and I want to access the data using http call from AngularJS. But it is giving me the error
XMLHttpRequest cannot load http://localhost:9000/transaction-service/transaction/query?id=800103209000150247301466600013. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
I know it has something to do with the headers but I don't know how to do it.
You have violated the same origin policy restriction to deal with this in angularjs. You have two solutions
JSON with padding (JSONP) and Cross-origin resource sharing (CORS) headers.
Let’s examine a sample JSONP request and response to see how it works in practice. First of all we need to invoke a JSONP request:
$http
.jsonp('http://angularjs.org/greet.php?callback=JSON_CALLBACK', {
params:{
name:'World'
}
}).success(function (data) {
$scope.greeting = data;
});
Or setting the appropriate CORS headers to allow you to cross domain resource sharing. If you're using Apache :
put the following into your .htaccess file:
Header set Access-Control-Allow-Origin "*"
If you don't have access to configure Apache, you can still send the header from a PHP script. It's a case of adding the following to your PHP scripts:
<?php
header("Access-Control-Allow-Origin: *");
How to come up this error,
XMLHttpRequest cannot load http://samples.openweathermap.org/data/2.5/forecast?appid=bXXXXa1&q=London,us. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
The application is building up in AngularJS and server is created through gulp-connect.
even not sure, this will fix in AngularJs file or in gulp :(
You need to add this headers on server side
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *
From my Angular client, i am invoking another application URL which will return a JSON object.
When i try in IE11 , it works fine but in Firefox and Chrome, i get:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS header 'Access-Control-Allow-Origin' missing).
I tried to add the Access-Control-Allow-origin in the header, i started get CORS Request Failed.
How can i handle this scenario in my angular 1.5 application?
Access-Control-Allow-origin
First of all it has nothing to do with angular. You make an request to backend and your backend response to the request.
CORS Filter Missing Angular there is no CORS Filter Missing Angular in angular but in your api. You need to set CORS Filter in your api so your angular application can make a request and api can response to that.
This picture describe how cors filter works
does anybody know where I can set a header in Sailsjs?
I have to set the Access-Control-Allow-Origin header that I can use my sails instance as API.
Currently I get this error if I try to send a request via $http.get in AngularJs
[Error] XMLHttpRequest cannot load http://acreasyURL.io/signin. Origin http://myhostOnMyMac.io:8000 is not allowed by Access-Control-Allow-Origin.
Any idea?
Cheers!!
Normally, you don't have to set it manually.
Sails has some CORS functionality built in:
https://github.com/balderdashy/sails-docs/blob/bc148104378f1ad590a69220c25f60fe41a59790/config.cors.md