Home / Questions / 184855
Accepted
Norak
Asked: 2020-07-31 01:53:17 +0800 CST 2020-07-31 01:53:17 +0800 CST

Error in request to Web Service with jQuery

  • 772

I am making a simple request to a web service that I have hosted on a hosting. If I try with postman, it returns a 200 and everything works fine, but I don't know what I'm doing wrong in my example. I leave you the code:

$(document).ready(function(){
	
	var url = 'https://www.dominiowebservice.com/miws/'
	var jsonData = {
		  "id": 23,
		  "datos": {
			  "nombre": "Nombre",
			  "email": "[email protected]",
			  "comentario": "Texto de mi comentario"
		  }
		}
	
	$.ajax({
        type: 'POST',
        url: url,
        data: jsonData,
        dataType: 'json',
        contentType: 'application/json',
		headers: { "Authorization": 'Bearer ' + 'lzoKSJorIm0rJEfTcsw'},
        success: function(response) {
          console.log('SUCCESS')
          console.log(response)
        }
    })
	
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

It returns the following error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.dominiowebservice.com/miws/. (Reason: CORS preflight channel did not succeed).

How can I solve that? Is the error in my ajax request or in the web service itself? But I'm telling you that since Postman it has worked for me

jquery

2 Answers

  1. Best Answer

    CORS (also known as cross-origin resource sharing ) rules prevent you from accessing resources from an external page if the external page does not authorize your website to do so.

    By default, all queries within the same origin (same URL or Same Origin Policy ) are assumed to be secure and do not use CORS for validation, only queries to external origins (or URLs).

    To do this, the browser makes a previous query (preflight request) using the HTTP methodOPTIONS .

    Precisely that previous test is the one that has failed and that is why it generates the error:

    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.dominiowebservice.com/miws/ .

    (Reason: CORS preflight channel did not succeed).

    Or, what is the same, that the previous verification that your API allows queries from the origin has failed and, therefore, it is assumed that it is prohibited.

    One way to implement the response to that previous query could be by adding the following code to the beginning of your PHP script:

    <?php
/* Permitimos a cualquier origen acceder a este API de manera remota */
header('Access-Control-Allow-Origin: *');
/* Permitimos la cabecera HTTP X-Requested-With (por ejemplo) */
header('Access-Control-Allow-Headers: X-Requested-With');
/* No debe ejecutarse el resto del script mediante la consulta OPTIONS previa */
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
  die();
}

    NOTE : This code allows access to your API from any URL .

    If you want to restrict API access to a small number of URLs then you should do something like the following:

    <?php
/* Listado de URLs (orígenes) que tienen acceso al API (sin / al final) */
$autorizados = [
  'http://www.origen1.com',
  'https://www.origen2.es',
];
/* Comprobamos que el origen esté en el listado de orígenes permitidos */
if (
  isset($_SERVER['HTTP_ORIGIN'])
  && in_array($_SERVER['HTTP_ORIGIN'], $autorizados) === true
) {
  /* Indicamos que este API permite métodos GET, POST y OPTIONS (por ejemplo) */
  header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
  header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
  }
  /* No debe ejecutarse el resto del script mediante la consulta OPTIONS previa */
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
  die();
}

    There are many HTTP headers that allow us to manage data exchange:

    • Access-Control-Allow-Origin
    • Access-Control-Allow-Credentials
    • Access-Control-Allow-Headers
    • Access-Control-Allow-Methods
    • Access-Control-Expose-Headers
    • Access-Control-Max-Age
    • Access-Control-Request-Headers
    • Access-Control-Request-Method
    • Origin

    Among them, an important one, in terms of performance, is Access-Control-Max-Age. It allows us to allow the browser to save the result of the previous query in cache for a certain time:

    <?php
/* Evitamos que el navegador compruebe de nuevo CORS durante una hora */
header('Access-Control-Max-Age: 3600');
    • 1

  2. The only way to avoid the same origin policy on ajax calls is to use the jsonp data type. However, the server must support it.

    $.ajax({
    dataType: "jsonp",
    ...
});

    Here is a rather interesting article on the subject. It talks about the same origin policy and the problems with ajax. Description and examples of json, when it can be used, and problems of using it (mainly security).

    • 0