No 'Access-Control-Allow-Origin' header is present in Rails API backend - javascript

I have a jsonapi-resources backend api in Rails. I am able to request data using curl as well as in Python.
When I try using jQuery for the request I get the following error in the browser:
XMLHttpRequest cannot load
https://shop-api-3.herokuapp.com/customers?filter%5Bshop_token%5D=9e3c9769b752436ddbd27597cf946a36.
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access. The response
had HTTP status code 404.
So I added this to config/environments/production.rb:
config.action_dispatch.default_headers = {
'Access-Control-Allow-Headers' => 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
'Access-Control-Allow-Origin' => '*',
'Access-Control-Request-Method' => '*',
'X-Frame-Options' => 'ALLOWALL'
}
However, I'm still getting the same error. What am I missing?
FWIW, this is my curl command:
curl -i -H "Accept: application/vnd.api+json" "https://app.herokuapp.com/retentions?filter%5Bshop_token%
5D=ABC123"
Using Rails 4

I had this same issue a month ago and after reading a lot of blogposts, I solved it by...
So it looks like you are requesting an api token, on another server using jquery(from the browser) rather than doing this, request it from ur server and ounce you get it pass it to the client and then you can do whatever you want, this should do the trick.
My understanding of this CORS is you cant do browser to server, you have to do it from server(your domain) to server(the api that you are accessing).
Hope this helps!

Related

CORS - Response to preflight request doesn't pass access control check

I am trying to send a GET request to a server (the server and the local host have the same domain), however I keep getting the following error:
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
This is the code I use to send the request
$.ajaxSetup({
headers: {
'Access-Control-Allow-Origin': "*",
'Access-Control-Allow-Methods': "GET, POST, PATCH, PUT, DELETE, OPTIONS",
'Access-Control-Allow-Headers': "Origin, Content-Type, X-Auth-Token"
}
});
$.get(myurl, function(data) {
console.log(data);
});
I not sure how to fix this error, since I'm new to web development.
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
The Access-Control control headers have to be sent by the responding server. Depending on the response and requesting page, browser may allow the request to proceed, out just show the error you got.
If adding the headers was enough, any CORS policy would be moot: any page could access any resource.
the server and the local host have the same domain
I'm not sure what you mean here, but apparently your page is loaded from a different domain than myurl points to.
The Access-Control headers should be sent by the server, not by the client.
You have to set Access-Control in your server app, If your back-end is on java then you can use filter to set Access-Control headers

AWS APIGateway CORS for Lambda Proxy does not apply

I have set up a APIGateway resource with a POST Lambda Proxy method, and an OPTIONS method for CORS headers.
The OPTIONS method returns these headers:
$ curl -i -X OPTIONS https://xxxxxxxxx.execute-api.eu-central-1.amazonaws.com/dev/endpoint1
HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 0
Connection: keep-alive
Date: Sat, 18 Feb 2017 17:07:17 GMT
x-amzn-RequestId: xxxx
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
Access-Control-Allow-Methods: POST,OPTIONS
X-Cache: Miss from cloudfront
Via: 1.1 xxxx.cloudfront.net (CloudFront)
X-Amz-Cf-Id: xxxx==
Yet when I call the POST endpoint with the generated Javascript SDK, the Chrome browser console shows this error:
XMLHttpRequest cannot load https://xxxx.execute-api.eu-central-1.amazonaws.com/dev/endpoint1.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8080' is therefore not allowed access.
as well as Firefox:
Cross-Origin Request Blocked:
The Same Origin Policy disallows reading the remote resource at https://xxxx.execute-api.eu-central-1.amazonaws.com/dev/endpoint1.
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Why is my CORS header not taken into account? Are additional changes of the POST method settings required?
It seems to be required to add the headers manually in the lambda function.
In the case of NodeJS the script would look like this:
context.succeed({
"statusCode": 200,
"headers": {
"X-Requested-With": '*',
"Access-Control-Allow-Headers": 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,x-requested-with',
"Access-Control-Allow-Origin": '*',
"Access-Control-Allow-Methods": 'POST,GET,OPTIONS'
},
"body": JSON.stringify(response)
})
A better approach would be to use the API Gateway to enrich the payload from your lambda with CORS related headers as described here: https://kennbrodhagen.net/2015/12/02/how-to-access-http-headers-using-aws-api-gateway-and-lambda/
This is a much more scalable and less error prone approach.
Please check below points.
Did you deploy your updated API?
Did you create OPTIONS method for your API resource?
Did you add response headers for Method Response of OPTIONS method like below?
Access-Control-Allow-Headers
Access-Control-Allow-Methods
Access-Control-Allow-Origin
Did you perform 'Enable CORS' action on your API Resource?
After complete to check above, please check the Method Request of GET/POST Method of your API Resource. Perhaps, Access-Control-Allow-Origin HTTP header was added automatically by API Gateway.
Thanks,
Daniel

Alfresco : External Webservice calling gettting error not able to get result?

Alfresco community edition-5.1.x. when calling external webservice I'm getting error not able to get result
Code:
function updateList(){
Alfresco.util.Ajax.request({
url: "http://test.com/webservice/mgmobile/mgserver.php?wsfunction=course_get_all_courses&wstoken=7f5e0f05f7c54ece7a23f02fe3718464",
method: Alfresco.util.Ajax.GET,
headers: ('Access-Control-Allow-Origin: *'),
headers: ('Access-Control-Request-Headers: *'),
headers: ('Access-Control-Allow-Methods: *'),
requestContentType: Alfresco.util.Ajax.JSON,
successCallback:{
fn: function(res){
appendOptiOnvalues(res)
},
},
failureCallback:{
fn: function(res){
alert("Error");
},
}
});
}
Error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://test.com/webservice/mgmobile/mgserver.php?wsfunction=course_get_all_courses&wstoken=7f5e0f05f7c54ece7a23f02fe3718464. (Reason: missing token 'content-type' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).
Please help on this.
It looks like the call is being made to a non-Alfresco server so configuring CORS on Alfresco is not going to help. Instead, check the CORS configuration on the server you are calling and make sure that it is setting "Access-Control-Allow-Headers" to allow the "content-type" header to be specified. That's probably being set by the Alfresco AJAX util library you are using.
I don't know what server you are calling, so I can't provide CORS help specific to that server, but here is some info on enabling CORS for various types of servers.
We came across this today when trying to call an Alfresco Webscript from the Alfresco Share UI and found the issue was in the Alfresco Platform CORS configuration. Our Alfresco.util.Ajax.request included the following headers with the request by default:
localtoken
x-requested-with
These had to be included in our cors.allowed.headers property in alfresco-global.properties otherwise the request would be rejected with an HTTP 403 by ACS.
Example
cors.enabled=true
cors.allowed.origins=http://localhost:8180
cors.allowed.methods=GET,HEAD,POST,PUT,DELETE,OPTIONS
cors.allowed.headers=origin, authorization, x-file-size, x-file-name, content-type, accept, x-file-type, range, localtoken, x-requested-with
cors.support.credentials=true
cors.exposed.headers=Accept-Ranges, Content-Encoding, Content-Length, Content-Range, content-type, localtoken
Notes
Keep in mind alfresco-global.properties is where you configure this when using the ACS all-in-one-platform-docker container provided by Alfresco. If deploying your own WAR in Tomcat or another application server you'll need to follow instructions specific to that system.

CORS error in JS (XMLRequest)

I’m trying to communicate a web page with a RestAPI server. When I try to do an http request the following message appears:
XMLHttpRequest cannot load https://(MyUrl). Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
xhr.setRequestHeader("Access-Control-Allow-Origin", "*"); //Some line in my web page code
response.setRequestHeader("Access-Control-Allow-Origin", "*"); //Some line in my APIRest code
I have been doing some research about CORS and I don't understand which headers I have to include to the http request and what headers I have to include in the server to enable it. Should I add something in some .config?
For what I have understood, my petition is a “not-simple” request, as it’s a multipart request with an application/json part that also sends a token into the header. It’s a POST request.
Thanks!
It does not help that you set the headers in the client side. The server needs to have that header present in order to allow requests from third parties.
And so this will not work for you as long as the server does not have the Access-Control-Allow-Origin header set to allow your requests.
You can read more about CORS here.

No 'Access-Control-Allow-Origin' header is present on the requested resource when trying to connect to Raspberry

I'm working with my Raspberry Pi.
I have my raspberry Pi, that on the IP: 192.168.X.X/file.json give me a webpage containing data in json. While trying to built a web page that requests in that page with the following code:
$.getJSON('http://192.168.X.x:8080/file.json', function(data) {
//code }
It returns the an error on the browser:
XMLHttpRequest cannot load http://192.168.X.X:8080/file.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
Can you tell me how to fix it?
And where to put the code to fix it?
Your issue is related to Cross-Origin Resource Sharing (CORS): basically, you cannot access a domain via Ajax if it's not allowed on the server side. This is a "security" feature on most modern browsers. You won't encounter this problem using command line such as curl or chrome's Postman extension.
Make sure the domain requesting the data (localhost) is allowed in the Access-Control-Allow-Origin header, as well as the http verb (GET, POST, PUT... or * for every http methods).
Basically, it comes down to add the two following headers to the http://192.168.X.x/ server's response:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
If you use node.js with Express, you can do the following :
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
// or res.header("Access-Control-Allow-Origin", "localhost");
res.header("Access-Control-Allow-Headers", "*");
next();
});
You need to configure your web server to set the appropriate CORS response headers.

Categories