This question already has answers here:
Same origin Policy and CORS (Cross-origin resource sharing)
(2 answers)
Closed 7 years ago.
I'm having trouble using vue-resource with some json data.
I'm following the example here: https://github.com/vuejs/vue-resource/blob/master/docs/http.md
My vue-resource call looks like this:
ready: function() {
this.$http.get('http://section.dynns.com/sections').then(function (response) {
this.$set('data_list', response.data)
});
},
See jsfiddle here:
http://jsfiddle.net/greene48/yb5chmfr/
But, switching that api call for a different set of data seems to work:
http://jsfiddle.net/greene48/92gfwqL3/
So, maybe there is something wrong with the json I'm trying to use?
Any help would be appreciated.
Thanks
http://jsonplaceholder.typicode.com/posts sets CORS headers. http://section.dynns.com/sections does not. Without CORS headers, your requests to a different domain name are subject to the browser's same-origin policy and will fail.
Your other options are JSONP (if the API supports it) or proxying requests through a server-side script.
Related
This question already has answers here:
from origin 'xxx' has been blocked by CORS policy: [duplicate]
(2 answers)
Closed 3 years ago.
I'm trying to authenticate over OAUTH API using Axios. The initial request is just a simple GET to get the auth token.
axios.get(
"https://github.com/login/oauth/authorize?client_id=$ID"
).then((res) => { console.log(res) })
I immediately get:
...from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I can use an href link and it works totally fine. What could be the issue here?
In simple terms, when you are using the anchor tag, it is a link to the original site. When user click on a tag, user will be redirected to that site. But when an AJAX request user will stay in your site and sends an ajax request to the server(github in this case).
When using HTTP protocol there is a header call origin which will tell the backend server where user is from, see the below picture
So if server does not allow sources other than it self, this security check will be failed and the AJAX request won't be success. Please let me know if you need more clarifications and I'll be glad to help. Hope that helps.
This question already has answers here:
Ways to circumvent the same-origin policy
(8 answers)
Closed 6 years ago.
I created asp.net webApi and publish in somee.com. I type link xxxx.somee.com/api/xxxx is ok. But I call in Angularjs not run
$http.get('http://xxxxxx.somee.com/api')
.then(function(response) {
console.log(response);
});
I received error:
XMLHttpRequest cannot load xxxx.somee.com/api/xxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Please give the solutions. Thank you very much.
If your Angular website and API websites are running in a different domain or with ports this issue will happen.
To resolve this please add the following code into your webapiconfig.cs file.
var cors = new EnableCorsAttribute(http(s):// xxxx.somee.com/api/xxxx, "*", "*");
config.EnableCors(cors);
This question already has answers here:
Ways to circumvent the same-origin policy
(8 answers)
Closed 7 years ago.
I have tried to read a json from remote server, then i got this error.
"Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource"
Then i read that i need to set the datatype to jsonp.
dataType: 'jsonp',
The problem is the json that i am getting isn't in jsonp format, which is required by jsonp. If i don't use jsonp i get the above error message.
How can I resolve this?
You have to enable a CORS request on the server side as well.
Add this line to your code:
response.addHeader("Access-Control-Allow-Origin", "*");
You can replace * with your site's url if you want to allow only for particular domain.
This question already has answers here:
Origin null is not allowed by Access-Control-Allow-Origin
(8 answers)
Closed 8 years ago.
How to avoid "Request header field Authorization is not allowed by Access-Control-Allow-Headers" error running JavaScript from local drive?
So I cannot modify server headers as there is no server.
Thank you.
That is not duplicate as solution offered at 'Origin null is not allowed by Access-Control-Allow-Origin' does not work, you can read about it there.
No. You will need a server like Mongoose (very simple download and run in your root). A very easy fix.
This question already has answers here:
Ways to circumvent the same-origin policy
(8 answers)
Closed 9 years ago.
I need to make a cross domain ajax call to a server I own but the problem is that the request must come from the client not the server so proxies wont work for me. Our server will be behind a vpn so it won't be able to reach the internet but the client will be able to so we wanted to do a call home from the client to our metrics server to validate a product key.
My remote domain has a php script that simply writes either a 0, 1, or 2. I need my javascript to read this value in and react to it.
I want to do something simple like this but clearly it won't work. Any suggestions?
$.ajax({
url: callHomeUrl,
type: 'GET',
success: function(res) {
document.write($(res.responseText).text());
}
});
You can use a JSONP style implementation for that to get access to your server which works across all browser without CORS!
Example -
var script=document.createElement('script'):
script.type='text/javascript'; script.src='path/to/the/file';
document.getElementsByTagName('head')[0].appendChild(script);
Note that the file in the server should output the javascript function along with any relevant data.