I have a javascript code which loads json data from some json_url using ajax requests I am getting folloowing error when running the html in chrome
Access to XMLHttpRequest at json_url from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
To fix this error I am opening chrome by disabling web security through the following command
google-chrome --disable-web-security --user-data-dir="/tmp/chrome_dev_test"
Is there anyway to fix this error so that I can run html on chrome without disabling web security every time?
front-end code used:
function getJSON(url){
$.ajax({
type:'GET',
url:url,
dataType:'json',
contentType:'application/json',
timeout: 3000,
success:function(data){
//do something with data
}
});
}
You need to enable CORS on your server side. Here's a guide for many servers, use what suits you.
https://enable-cors.org/server.html
Also in your client-side code, when you specify your request add that it's a CORS request. For example:
$.ajax({
url: "http://www.someotherdomain.com",
type: "POST",
crossDomain: true, //<-- this right here
data: JSON.stringify(somejson),
dataType: "json",
success: function (response) {
// ...
},
error: function (xhr, status) {
// ...
}
});
Related
I'm trying to use API to get information about a specific user based on user ID. I need to use basic auth and pass some headers with my call.
I'm getting this:
Cross-Origin Read Blocking (CORB) blocked cross-origin response "rest/user/getProfile?callback=jQuery224033348109431646855_1548684613983&userId=24068..." with MIME type text/plain.
My code:
$.ajax
({
type: 'GET',
crossDomain: true,
async: false,
url: 'example_URL_/api/user/getProfile',
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
beforeSend: function (xhr) { xhr.setRequestHeader("Authorization", "Basic ZHVubmVzYXBpskjoi43u5409543o9tI654kjhugjy"); },
dataType: 'jsonp',
data: { "Id": "1234" },
success: function (data) {
console.log(data);
},
error: function (xhr, status, error) {
console.log(xhr);
console.log(status);
console.log(error);
}
});
is there anything I'm missing?
You said:
dataType: 'jsonp',
… so jQuery makes a JSONP request (i.e. inserts a <script> element).
The browser makes a request to the URL and the server said:
Content-Type: text/plain
Since a plain text document is not a JavaScript program, the browser refused to execute it and threw a CORB error instead.
A JSONP response must be application/javascript, not text/plain.
You need to either:
Not make a request for JSONP
Change the server to respond with JSONP
Aside: Since you are using JSONP, the type, crossDomain, async, headers, and xhr.setRequestHeader properties have no effect.
Since you said you needed to set basic auth, that rules out option two. You can't use JSONP for this.
In your API configure CORS to accept all domains, or enter the domain that you're using to send the request from.
If your API is created by PHP here is an example:
<?php
header("Access-Control-Allow-Origin: *");
Or if you are using a third party API, try to see the documentation. I'm sure there will be a part talking about CORS.
Im trying to accomplish SOAP-post to get back XML data.
Problem is that "No 'Access-Control-Allow-Origin' header" and I suppose that the server needs to add the header.
So I created a MockService in SOAPui and copied the server response. But I still get the same problem. In soapUI in the response I added this http://imgur.com/TZXM2Ca
function soap() {
var sr = MySoapRequest;
$.ajax({
url: url,
beforeSend: function(xhr) {
xhr.setRequestHeader("SOAPAction", "x");
},
type: "POST",
dataType: "xml",
data: sr,
crossDomain: true,
success: function (data) {
console.log(data);
},
error: function (error) {
},
contentType: "text/xml; charset=\"utf-8\""
});
}
By default, browsers cannot make POST requests via AJAX to URLs which are not in the same origin as the current page. For example, if you have open a page that sits in the URL http://foo.com, and that page tries to post some data (via AJAX) to http://bar.com, you will normally get the error you are seeing now.
If you want to make this work, you have to configure your server to accept requests via Cross-Origin Resource Sharing (CORS). I suggest that you get some information about CORS, you can find a lot of documentation online about it. An extensive overview can be found here.
As for the actual implementation of CORS on your server, it depends on which platform you are using. If you are using PHP, have a look at this question.
I have backend webService on tomcat server.always when I perform any request (post, get),code enters on error method.
jQuery code is:
var jqxhr = $.ajax(
{
type:"GET",
url:url
success: function() {
alert("success");
},
error: function() {
alert("fail");
}
});
my url is:
http://"192.168.20.220":6060/NostServices/rest/user/resend_activation_email/mailex#blah.com
error message on log is:
XMLHttpRequest cannot load http://"192.168.20.220":8080/NostServices/rest/user/resend_activation_email/dsgg#sdfkmj.com.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://"192.168.20.220":8383' is therefore not allowed access.
web service server is tomcat.
response of this requset can be 1 for success and -1 for mail not valid
and always enter on fail method and when I try to alert response it output [object object]
thanks you for your help
It's a JSONP request so your server side script needs to return data wrapped in callback:
For example
var url = 'http://example.com/req.json?callback=?';
$.ajax({
type: 'GET',
url: url,
async: false,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
console.log(json);
},
error: function(e) {
console.log(e.message);
}
});
And on server side:
jsonCallback({});
As your error says your code is failing because of the cross domain error problem. A very detailed answer is found here:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '...' is therefore not allowed access
Please put in some effort to google these issues, this is a very common thing your trying and all errors have been encountered before and have been resolved somewhere. People will get very annoyed here if you show no effort to debug it yourself or provide all the required detail such as:
All relevant code
Print out of any variables in the code e.g. URL's
Any error message
A list of things you have tried
On a side note a URL should not have quotes it it. It should not be
http://"192.168.1.1":.........
it should be:
http://192.168.1.1:........
Im getting this error when trying to POST and XML from my company website to FRESHDESK API
here is the javascript
$(document).ready(function(){
var data =
'<helpdesk_ticket>' +
'<description>This is a test</description>' +
'<email>sample#example.com</email>' +
'</helpdesk_ticket>'
$.support.cors = true;
$.ajax({
url: 'http://onehouse.freshdesk.com/helpdesk/tickets.xml',
type: 'POST',
crossDomain: true,
data: data,
dataType: "text",
username: 'MY API CODE',
password: 'X',
success: function (result) {
alert(result);
},
});
the full error is
XMLHttpRequest cannot load http://onehouse.freshdesk.com/helpdesk/tickets.xml. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. contacts?oid=00DU0000000I430&retURL=http%3A%2F%2Fwww.ironridge.com&email=ma…utes%5D%5Bdescription_html%5D=safsadfsdaf&00NU0000002xpYP=&submit=Submit:1
Does anyone have any solutions to this........it does not post the data to the FRESHDESK WEBSITE and i've been banging my heads for days now
It says it right there in the error.
You cannot do any AJAX requests (aside from jsonp) to a different domain due to Access-Control-Allow-Origin.
This is a CORS feature (see http://en.wikipedia.org/wiki/Cross-origin_resource_sharing). Even though you set crossDomain to true in your request, the server that you post to has to support CORS for this to work. Namely, the server has to respond with specific HTTP headers for the browser to allow this request.
I have developed WCF rest service and deployed it on a link that can be accessed via the browser because its action is "GET".
I want to get that data using jQuery. I tried my best to get WCf get response using jQuery
but in vain. I also tried $.Ajax with 'jsonp' with no luck. Can any one help me?
The url is: http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation
You can check that url response by pasting url in browser.
You need to set Access-Control-Allow-Origin to value [*] in your response header.
this blog gives the more details how it can be done in WCF REST service
if you were to do this in Web API you could have just added
Response.Headers.Add("Access-Control-Allow-Origin", "*")
calling the service using a fiddle
$(function() {
$.ajax({
url: "http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation",
datatype: 'json',
type : 'get',
success: function(data) {
debugger;
var obj = data;
}
});
});
I got the error
XMLHttpRequest cannot load
http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation.
Origin http://fiddle.jshell.net is not allowed by
Access-Control-Allow-Origin.
I can't make a cross domain example to show you but
$('#a').load('http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation?callback=run');
would work had those things been set.
Your service needs to either enable JSONP callbacks or set the Access-Control-Allow-Origin header for cross domain requests to work, or you need to run the script from the same domain. Given that your url says AndroidApp I'm thinking you want cross domain.
Sample code below:
$.ajax
(
{
type: 'GET',
url: http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation,
cache: false,
async: true,
dataType: 'json',
success: function (response, type, xhr)
{
window.alert(response);
},
error: function (xhr)
{
window.alert('error: ' + xhr.statusText);
}
}
);