I am trying to make an get call using iron-ajax as follows:
<iron-ajax
id="getLogsAjax"
url="http://localhost:51806/{{logPath}}"
method="get"
handle-as="text"
last-response="{{logResponse}}">
</iron-ajax>
But am getting the following error:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access
I see this was solved on an older version of Polymer but the byutv-jsonp library used there is now outdated. Any idea how to solve this with Polymer 3.0?
Related
I have created a sample SAPUI5 application in online editor
Check this link to view my code
I am getting this below error -
> XMLHttpRequest cannot load
> http://services.odata.org/V2/Northwind/Northwind.svc/Products?$format=json.
> No 'Access-Control-Allow-Origin' header is present on the requested
> resource.
Can someone help me in solving this issue - I understand that it is CORS issue which can be solved by disabling the security in chrome.
However - I don't to disable the security feature of chrome. So, is there any other way (probably by passing some headers) to solve this issue.
Appreciate your help in advance.
P.S.: I have already looked in these links -
http://scn.sap.com/community/developer-center/front-end/blog/2013/06/29/solving-same-origin-policy-issue-in-different-ways
http://scn.sap.com/community/gateway/blog/2014/09/23/solve-cors-with-gateway-and-chrome
add the northwind odata service as a destination under the DESTINATIONS tab of your hcp account. Then make an ajax call to the northwind services using relative path i.e. /destination/.....
Or make your own java application that works as proxy which allows source as and re-routes the payload to the correct destination.
basically destination is also a proxy supplied for out of the box usage by sap
If this is just for the purpose of testing, the following solution should be the easiest.
Use a proxy service which adds the needed headers, for example the following: https://github.com/Rob--W/cors-anywhere
Usage is really simple, just add the URL of the proxy service before your OData URL:
var uri = "https://cors-anywhere.herokuapp.com/https://services.odata.org/V2/Northwind/Northwind.svc/Products?$format=json";
I'm making a request to an authorized Instagram account to display images on a site. Originally, I was running into No 'Access-Control-Allow-Origin' when using Angular's $http.get(....
From Matt's answer in this question, It seems that I can use getJSON, or Angular $http.jsonp, to bypass this issue. That Guy's answer also says "JSONP is really a simply trick to overcome XMLHttpRequest same domain policy".
So, I'm no longer getting that problem, and am getting a json payload:
{"pagination":{"next_url":"https:\/\/api.instagram.com... etc
But am getting a very ambiguous error:
Uncaught SyntaxError: Unexpected token :
This is a response from the Instagram API, so I'm not sure why there'd be a syntax error on the inbound json. Also, It's hard to locate the error since the jsonp response is all on a single line... where the error is reported.
The preview shows that I'm getting a full payload:
I found the issue. Unfortunately there are no JavaScript libraries to help with this, but in the Instagram API docs, for JSONP you can wrap the response with a callback so that the json payload will be wrapped in <script> tags (more info on jsonp here), therefore not blocked by Access Control Allow Origin.
https://api.instagram.com/v1/tags/coffee/media/recent?access_token=ACCESS-TOKEN&callback=callbackFunction
Response:
callbackFunction({
...
});
So, in your http request URI, you add in a callback parameter. Since I am using Angular, their docs for $http.jsonp() requests specify the callback string as "JSON_CALLBACK".
So, my request URL for Angular would be:
$http.jsonp(
'https://api.instagram.com/v1/tags/coffee/media/recent?
access_token=ACCESS-TOKEN&callback=JSON_CALLBACK')
.success(function(data) {...
I am building a webapp using AngularJS on top of a MarkLogic 7 XML database. I am using the REST API provided by MarkLogic to access the database. The code I'm using in my controller is as follows.
app.controller("mainController", function($scope, $http){
var addr = 'http://localhost:8011/v1/search?q=test&options=newtest';
$http({method:'GET', url: addr})
.success(function(data){
alert('Success');
console.log(data);
});
});
Now, when I open my view, a 'bad request' error is logged in the console.
OPTIONS http://localhost:8011/v1/search?q=test&options=newtest 400 (Bad Request)
angular.min.js:99
OPTIONS http://localhost:8011/v1/search?q=test&options=newtest No 'Access-Control-Allow-
Origin' header is present on the requested resource. Origin 'null' is therefore not
allowed access. angular.min.js:99
XMLHttpRequest cannot load http://localhost:8011/v1/search?q=test&options=newtest. No
'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null'
is therefore not allowed access. index.html:1
Are there any settings to be configured on the MarkLogic server to make the API accessible? Please help.
Thanks,
Krishna
Krishna, is your AngularJS code hosted by MarkLogic, or are you running it in node.js (via grunt, perhaps)? This looks like a cross-site scripting problem. Two solutions come to mind:
If you don't need a middle tier, MarkLogic can host the Angular code. Put it in the modules database of the app server on port 8011. Then the request is going to the same place the JS came from and the problem goes away.
If you want to keep a node layer, set up a proxy. Assuming you're using Grunt, you can see how I handled that in the Gruntfile.js of an app with the same stack.
Once you get past that error, you might consider moving the interaction with the MarkLogic REST API into a service. The Demo Cat application I linked to above has an early version of an MLRest AngularJS service; that might be a useful starting point.
I have a frontend in AngularJs and a playframework 2 Scala backend. Looking at this to add CORs to the backend - I have two endpoints a GET and POST
GET /api/question/:id controllers.Questions.getQuestion(id: String)
POST /api/question/:id controllers.Questions.postQuestion(id: String)
This solution provided in the other response works for the GET but not for the POST
def getQuestion(key:String) = CorsAction{
....
}
def postQuestion(key:String) = CorsAction(parse.json){
req =>
........
}
What I understood is that the CORsAction (which extends ActionBuilder) can also accept methods which a bodyparser and thus should essentially work for POST requests as well.
This is what I see in the browser console when i hit POST from my front end.
OPTIONS http://localhost:9000/api/question/abc123 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3001' is therefore not allowed access. angular.js:7997
XMLHttpRequest cannot load http://localhost:9000/api/question/abc123. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3001' is therefore not allowed access.
So I'm not sure the exact problem but adding the following to the routes
fixed the problem
OPTIONS /api/question/:id controllers.Application.preflight(id)
Where the preflight endpont just returns Ok with the CORs headers. But I would have thought that the CorsAction was supposed to take care of this. Anyways, moving on.
I'm trying to query the Spotify Metadata API with AngularJS but I keep running into the following error.
Uncaught SyntaxError: Unexpected token :
Now I know typically when querying you should add callback=JSON_CALLBACK as a query string but in this case it won't work. It returns:
Failed to load resource: the server responded with a status of 400 (Bad Request)
I am using $http.jsonp().
Example without callback | Example with callback
So, is there a way around this using pure Javascript or I'm best add a server-side wrapper (which I've got working but rather if it was pure Javascript)?
It doesn't seem like Spotify is providing jsonp support, but they do support CORS - so this should work:
function spotify_api($http) {
var url = "http://ws.spotify.com/lookup/1/.json?uri=spotify:track:5PJSqY8jbYzr4a6dl5Ory1";
//CORS support
delete $http.defaults.headers.common['X-Requested-With'];
$http.get(url).success(function(data) {
console.log(data);
});
}
See my update: http://jsfiddle.net/69kYH/
The bad news is that CORS doesn't seem to work properly in angular with older versions of IE - see AngularJS - Calling Flickr API fails with warning message