{"id":1139,"date":"2018-03-13T03:25:04","date_gmt":"2018-03-13T03:25:04","guid":{"rendered":"http:\/\/stackofcodes.in\/?p=1061"},"modified":"2018-03-13T03:25:04","modified_gmt":"2018-03-13T03:25:04","slug":"send-cross-domain-ajax-request","status":"publish","type":"post","link":"https:\/\/www.chandansharma.co.in\/blog\/send-cross-domain-ajax-request\/","title":{"rendered":"How to send a cross domain ajax request"},"content":{"rendered":"

 <\/p>\n

I want to send a cross domain ajax request but I am getting below error.<\/p>\n

I need to allow others send ajax requests to my script . So external requests may come from other websites and domains.<\/p>\n

Code which I have tried for request.<\/p>\n

$(document).ready(function () {\n    $.ajax({\n        type: 'POST',\n        url: \"http:\/\/otherdomain.com\/mypage.php\",\n        data: 'ss=' + 1,\n        success: function (msg) {\n            alert(msg);\n        }\n    });\n});<\/pre>\n
<\/div>\n
 <\/p>\n
Error on console log:<\/strong>\n\nCross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at\u00a0http:\/\/otherdoamin\/mypage.php. (Reason: CORS header \u2018Access-Control-Allow-Origin\u2019 missing)<\/pre>\n
If you control the server being POST ed, simply leverage the “Cross-Origin Resource Sharing standard” by setting response headers on the server.<\/p>\n
In short here is how you accomplish the cross domain POST from from-myend.com\/post.html to to-target.com\/post.php (using PHP as an example).<\/p>\n
Note: set Access-Control-Allow-Origin for NON OPTIONS .<\/p>\n
 <\/p>\n
SETUP:-TARGET DOMAIN::\u00a0 \u00a0 <\/strong><\/p>\n
In the posted domain server or the target domain server setup the following:<\/p>\n
switch ($_SERVER['HTTP_ORIGIN']) {\n    case 'http:\/\/from.com': \n    case 'https:\/\/from.com':\n         header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);\n         header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');\n         header('Access-Control-Max-Age: 1000');\n         header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');\n\n    break;\n}<\/pre>\n
This allows your script to make cross domain POST, GET and OPTIONS.<\/p>\n
SETUP:-FROM REQUEST SENDING DOMAIN::\u00a0\u00a0<\/strong><\/p>\n
Setup your cross domain POST from JS (jQuery example):<\/p>\n
$.ajax({\n    type: 'POST',\n    url: 'https:\/\/to-target.com\/post.php',\n    crossDomain: true,\n    data: '{\"some\":\"json\"}',\n    dataType: 'json',\n    success: function(responseData, textStatus, jqXHR) {\n        var value = responseData.someKey;\n    },\n    error: function (responseData, textStatus, errorThrown) {\n       alert('failed.');\n    }\n});<\/pre>\n
 <\/p>\n
Note:<\/p>\n
    \n
  1. For the security implications. Be careful before doing something like ‘Access-Control-Allow-Origin: *’\n
    header('Access-Control-Allow-Origin: *');<\/pre>\n<\/li>\n<\/ol>\n
     <\/p>\n","protected":false},"excerpt":{"rendered":"
      I want to send a cross domain ajax request but I am getting below error. I need to allow others send ajax requests to … <\/p>\n
    <\/path><\/svg><\/span><\/a><\/path><\/svg><\/span><\/a><\/path><\/svg><\/span><\/a>