How Can I Make Cross-Domain POST Requests in JavaScript Without Page Refresh or Response Parsing?

Sending Cross-Domain POST Requests with JavaScript

Problem:

How to perform a cross-domain POST request using JavaScript without refreshing the page or requiring a response parse?

Solution:

Understanding Cross-Origin Resource Sharing (CORS)

To facilitate cross-domain communication, CORS is a standard implemented on the server. By setting response headers on the server, you can grant permission to specific domains to access resources on your own domain.

Server-Side Configuration (Using PHP):

1. In the target PHP file (e.g., postHere.php), include the following code:

<?php
switch ($_SERVER['HTTP_ORIGIN']) {
    case 'http://from.com': case 'https://from.com':
    header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
    header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
    header('Access-Control-Max-Age: 1000');
    header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
    break;
}
?>

This allows the script from from.com to make cross-domain POST, GET, and OPTIONS requests.

Client-Side AJAX Request (Using jQuery):

1. Set up your AJAX request:

$.ajax({
  type: 'POST',
  url: 'https://to.com/postHere.php',
  crossDomain: true,
  data: '{"some":"json"}',
  dataType: 'json',
  success: function(responseData, textStatus, jqXHR) {
    var value = responseData.someKey;
  },
  error: function (responseData, textStatus, errorThrown) {
    alert('POST failed.');
  }
});

Process:

1. Browser sends an OPTIONS request to check if POSTing is allowed.
2. Server responds with Access-Control headers granting permission to specific domains.
3. Browser sends the actual POST request.
4. Server processes the request and returns the response.

Considerations:

• Ensure proper security precautions are in place when granting cross-origin access.
• Mobile browsers typically do not support cross-domain POST.
• Consider the potential overhead of double requests and security implications.
• Always return the appropriate CORS headers in the response, not just for OPTIONS requests.

The above is the detailed content of How Can I Make Cross-Domain POST Requests in JavaScript Without Page Refresh or Response Parsing?. For more information, please follow other related articles on the PHP Chinese website!