Below is my code:
While using local url I am getting the error
"Failed to load http://localhost/reactjs/my-app/lib/ajax.php: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access"
But when I used live url such as "https://jsonplaceholder.typicode.com/todos" its working fine.
$.ajax({
url: 'http://localhost/reactjs/lib/ajax.php',
//url: 'https://jsonplaceholder.typicode.com/todos',
type: 'GET',
dataType: 'jsonp',
//contentType: "application/json; charset=utf-8",
//jsonp: "json_callback",
crossOrigin: true,
//cors: true,
//data: {user_name:username, user_type: usertype, password: password,mode: 'Login' },
success: function(data){
alert(data);
},
error: function(error){
console.log(error);
}
});
You are calling different host so that's why you have CORS issue. Your application is running on localhost:3000 and you are calling your service on localhost.
You can do what Vivek suggests (if it is different host) or you just need to have proper port referenced (if both applications are on localhost:3000).
Note that you don't have to write absolute url in ajax. Instead, if it is on same host, you could just write /reactjs/lib/ajax.php.
Add this on php side :
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header("Access-Control-Allow-Headers: X-Requested-With");
And this url http://localhost/reactjs/my-app/lib/ajax.php should be http://localhost/reactjs/lib/ajax.php
Related
I have a question on the chat app, Naver LINE. There is an API that provides login authentication called LINE login.
I've follow the instructions on the documents and run the querystring and I got a callback URL that gives me the code look like this,
https://sample.com/callback?code=b5fd32eacc791df&state=123abc
Now, the document says I need to use the code in a http request using post method. I got the following,
XMLHttpRequest cannot load https://api.line.me/v1/oauth/accessToken/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://xxxxxxxxxxxxxxxxxxxxxxxxxxx' is therefore not allowed access. The response had HTTP status code 404.
Below is the request I wrote,
$.ajax({
url: "https://api.line.me/v1/oauth/accessToken/",
type: "POST",
xhrFields: {
withCredentials: true
},
crossDomain: true,
data: JSON.stringify(data),
dataType: "json",
success: function (response) {
var resp = JSON.parse(response)
alert(resp.status);
},
error: function (xhr, status, state, error) {
alert("error", xhr, status);
console.log(xhr);
console.log(status);
console.log(state);
console.log(error);
}
});
data is the credentials I put in so LINE would pass me the user's information.
Is there anything I did wrong? If so, how can I fix this?
Thanks ahead.
I am building a web app and for the server I am using nodejs and express. When I make a request to the server just from the browser it works fine, but when I try an ajax request from the client it registers on the server, but gives me an error on the client. Here is what I am using for the ajax request:
$.ajax({
async: false,
dataType: "json",
url: url,
crossDomain: true,
success: function(response) {},
error: function(response){
alert(JSON.stringify(response));
}
});
on server side, when you send the request... set header of response to allow cors:
something like this >>
res.writeHead(200,{
'Access-Control-Allow-Origin' : '*'
});
In place of '*', you can specify a set of urls, you want to server response to...
I am trying to redirect from my local domain to Paypal checkout domain using ajax request.I am also allowing cross domain to true.but I am getting the error that
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
my code is :
$.ajax({
type: 'GET',
url: url,
processData: false,
crossDomain: true,
contentType: "application/json",
jsonp: false,
success: function() {
alert("Success");
},
error: function() {
alert("failure");
}
});
In order for a CORS request to be allowed, the SERVER side needs to populate the Access-Control-Allow-Origin Header in the response. I would presume that the Paypal servers do not do this and so this is why you are receiving the error.
For more information, see this link: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
I got simple ajax call i could not get why it is not running success method despite the fact that chrome developer tools show that it is getting the response for the request.
$( document ).ready(function() {
var url_API="http://moviesapi.herokuapp.com/cinemas/find/"+"PL15RH";
$.ajax({
type: 'GET',
url: url_API,
dataType: "jsonp",
crossDomain:true,
success: function (response) {
alert(1);
}
});
});
The API doesn't support jsonp. You're getting 500 (Internal Server Error).
It does support JSON, but you're getting the classic No 'Access-Control-Allow-Origin' header is present on the requested resource CORS error. You need to explicitly send the Access-Control-Allow-Origin header on your heroku API:
Header property:
Access-Control-Allow-Origin: *
A more verbose solution: "No 'Access-Control-Allow-Origin' header is present on the requested resource"
try this:
jQuery(document).ready(function($) {
var url_API="http://moviesapi.herokuapp.com/cinemas/find/"+"PL15RH";
$.ajax({
type: 'GET',
url: url_API,
dataType: "json",
crossDomain:true,
success: function (response) {
alert(response);
}
});
});
I would like to call OData .NET web service that authenticates users via basic authentication.
I use following ajax call:
var fullUri = APIUri + "?$format=json";
$.ajax({
url: fullUri,
contentType: "application/json",
dataType: "jsonp",
type: 'GET',
jsonp: '$callback',
beforeSend: function setHeader(xhr) {
xhr.setRequestHeader('Authorization', token);
},
success: callback,
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError);
},
});
The results are unusable for me:
Calls are blocked because of CORS (until I will paste API url and try to load it in chrome). I tried local html file and html file uploaded to the same domain/port, but authentication fails (according to Chrome console).
Once I enter service URL into chrome address bar, I am asked to provide login name and password by Chrome. If I enter them, they are cached and used even I assign them in beforeSend. How to blocks this behavior?
I've tried a lot of examples how to configure jsonp, headers etc, but did not find working solution yet.
IIS server response header is also configured using "Access-Control-Allow-Origin" value="*".
You can set the HTTP Password and Username in the AJAX Call directly:
$.ajax({
url: fullUri,
contentType: "application/json",
username: <login>,
password: <password>,
...
Use the following to support CORS:
jQuery.support.cors = true;
Regarding the call, are you using HTTPS? Is the certificate valid?