问题
I am trying to post data to an API from my localhost:4502 port. When i tried to post data to this API using POSTMAN the data got added in the backend by providing the Basic Authorization key. The same i am trying to implement here in the Ajax Jquery call, but getting an CORS error. First time in jquery i am trying to post the data, please help here, what i can add. I have got the API key to for the Basic Authorization as a Username and Password can be left blank.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#Save").click(function(){
var person = new Object();
person.Name = $('#Name').val();
person.EmailAddress = $('#EmailAddress').val();
person.CustomFields = [0];
person.CustomFields[0].Key = "[Country]";
person.CustomFields[0].Value = $('#Country').val();;
$.ajax({
url: 'https://api.createsend.com/api/v3.1/subscribers/7c7a6087b0e450ad72b38be83098e271.json',
type: 'POST',
dataType: 'json',
data:person,
success: function(data,textStatus,xhr){
console.log(data);
},
error: function(xhr,textStatus,errorThrown){
console.log('Error Something');
},
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Basic OTdlMjVmNWJiMTdjNzI2MzVjOGU3NjlhOTI3ZTA3M2Q5MWZmMTA3ZDM2YTZkOWE5Og==");
}
});
});
});
</script>
回答1:
I have added dataType: 'jsonp' and it works!
$.ajax({
type: 'POST',
crossDomain: true,
dataType: 'jsonp',
url: '',
success: function(jsondata){
}
})
回答2:
Its a CORS issue, your api cannot be accessed directly from remote or different origin, In order to allow other ip address or other origins from accessing you api, you should add the 'Access-Control-Allow-Origin' on the api's header, you can set its value to '*' if you want it to be accessible to all, or you can set specific domain or ips like 'http://siteA.com' or 'http://192. ip address ';
Include this on your api's header, it may vary depending on how you are displaying json data,
if your using ajax, to retrieve and display data your header would look like this,
$.ajax({
url: '',
headers: { 'Access-Control-Allow-Origin': 'htt://site allowed to access' },
data: data,
type: 'dataType',
/* etc */
success: function(jsondata){
}
})
回答3:
If you are using NodeJs for your server side, just add these to your route and you will be Ok
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
Your route will then look somehow like this
router.post('/odin', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
return res.json({Name: req.body.name, Phone: req.body.phone});
});
Client side for Ajax call
var sendingData = {
name: "Odinfono Emmanuel",
phone: "1234567890"
}
<script>
$(document).ready(function(){
$.ajax({
url: 'http://127.0.0.1:3000/odin',
method: 'POST',
type: 'json',
data: sendingData,
success: function (response) {
console.log(response);
},
error: function (error) {
console.log(error);
}
});
});
</script>
You should have something like this in your browser console as response
{ name: "Odinfono Emmanuel", phone: "1234567890"}
Enjoy coding....
回答4:
Be aware to use constant HTTPS or HTTP for all requests. I had the same error msg: "No 'Access-Control-Allow-Origin' header is present on the requested resource."
来源：https://stackoverflow.com/questions/47523265/jquery-ajax-no-access-control-allow-origin-header-is-present-on-the-requested