Im making an app, where I want to sent $http.get requests to duckduckgo's API but their requests are done over HTTP. Seeing my site is HTTP is get the following error:
angular.js:11756 Mixed Content:
The page at 'URL' was loaded over HTTPS,
but requested an insecure XMLHttpRequest endpoint 'http://api.duckduckgo.com/'.
This request has been blocked; the content must be served over HTTPS.
When I adding the s to my request, I obviously get the following (seeing the CORS isn't setup):
XMLHttpRequest cannot load:
https://api.duckduckgo.com/?q=Undulated%20Tinamou&format=json&pretty=1.
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://URL' is therefore not allowed access. The response had HTTP status code 405.
My question: Is there any was for me to get the json and bypass one of the two stated above?
Edit1:
$http.get('https://api.duckduckgo.com/?q=' + birdname + '&format=json&callback=jsonp&pretty=1').then(function(res){
console.log(res.data);
});
I also tried the following:
$http.jsonp('https://api.duckduckgo.com/?q=' + birdname + '&format=json&callback=jsonp&pretty=1').then(function(res){
console.log(res.data);
});
With the second, I am getting the following error:
Uncaught ReferenceError: json is not defined
Related
I'm building a react.js app and I think I have CORS issues but I can't create a server. I'm therefore using a proxy (such as this one https://cors-anywhere.herokuapp.com/${myApiEndpointHere}).
When I'm using Chrome, I'm able to successfully fetch the data. However when I'm using Firefox or Safari, I get these issues listed below. This CORS issue (on Firefox and Safari) seems also to only happen when the scroll is triggered because both for Firefox, Safari and Chrome, I'm able to get my content and log in to the console.
Firefox:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at
https://res.cloudinary.com/dcpexd0zo/image/upload/v157136216…pes/Capture_d_e%CC%81cran_le_2019-10-17_a%CC%80_21.26.11.jpg.
(Reason: missing token ‘user-agent’ in CORS header
‘Access-Control-Allow-Headers’ from CORS preflight channel).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at
https://res.cloudinary.com/dcpexd0zo/image/upload/v157136216…pes/Capture_d_e%CC%81cran_le_2019-10-17_a%CC%80_21.26.11.jpg.
(Reason: CORS request did not succeed).
TypeError: NetworkError when attempting to fetch resource.
Safari:
Request header field User-Agent is not allowed by
Access-Control-Allow-Headers.
Fetch API cannot load
https://res.cloudinary.com/dcpexd0zo/image/upload/v1571362166/shapes/Capture_d_e%CC%81cran_le_2019-10-17_a%CC%80_21.26.11.jpg
due to access control checks.
https://res.cloudinary.com/dcpexd0zo/image/upload/v1571362166/shapes/Capture_d_e%CC%81cran_le_2019-10-17_a%CC%80_21.26.11.jpg
Failed to load resource: Request header field User-Agent is not
allowed by Access-Control-Allow-Headers.
Error: The error you provided does not contain a stack trace.
Unhandled Promise Rejection: TypeError: Request header field
User-Agent is not allowed by Access-Control-Allow-Headers.
You should read this: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers
And add this header to the response from the proxy server: Access-Control-Allow-Headers: *
I've got an AngularJs app running which works with: https://jsonplaceholder.typicode.com/todos
But not with another API (can't show the link) which returns the error:
Access to XMLHttpRequest at 'APIURL' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
21:35:47.396 angular.js:12410 Cross-Origin Read Blocking (CORB) blocked cross-origin response APIURL. See https://www.chromestatus.com/feature/5629709824032768 for more details.
Factory
factory.readProducts = function(){
return $http({
method: 'GET',
url: 'APIURL'
});
console.log('Factory read',factory.readProducts)
};
I've looked at multiple sources and can't come to a conclusion of how to solve this error. I'm running my app locally with XAMPP (or is there an alternative?)
I needed to add Access-Control-Allow-Origin: localhost to my other servers API header
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: *");
When calling
JavaScript
Stamplay.Object('contact').update()
I'm getting this error:
JavaScript
PUT https://myappid.stamplayapp.com/api/cobject/v1/contact
index.html:1 XMLHttpRequest cannot load https://myappid.stamplayapp.com/api/cobject/v1/contact.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://www.example.com' is therefore not allowed access.
The response had HTTP status code 404.
You need CORS support in the response of https://myappid.stamplayapp.com/api/cobject/v1/contact which means the HEADER should contain something like the following line:
Access-Control-Allow-Origin: https://www.example.com
I couldn't call my service which gives an error
index.html:1 XMLHttpRequest cannot load http://localhost:14652/api/Employee. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1873' is therefore not allowed access.
What should i do?
Your browser won't let you make this request because the Access-Control-Allow-Origin (necessary for a cross-domain request) is missing in the header of whatever send your api, if you just want to make some tests you can disable it on your browser by launching it with the following flags:
google-chrome --disable-web-security --allow-file-access-from-files
But you should really read this : http://www.eriwen.com/javascript/how-to-cors/ and have cors working on your server