I was doing a mini project to be able to extract part of the text from an external website, I have been reporting on the subject and apparently this is called CORS, I tried to implement it but it did not just work for me. I'm doing it through ajax with jquery, and I've read in several places that there is a jtyp or xml datatype, and if not, add a header so that
headers:{"Access-Control-Allow-Origin: *"},
This is what I have. MY VISTA
<div class="container">
<h1 class="page-header" >{{$titulo}}</h1>
{!! Form::open(['url' => '/lyrics', 'method' => 'POST','class' =>'form-horizontal']) !!}
<div class="row">
<div class="col-md-12 form-group">
{!! Form::hidden('taginicial', $tags['taginicial'] ) !!}
{!! Form::hidden('tagfinal', $tags['tagfinal']) !!}
{!! Form::hidden('pagina', $tags['pagina'] ) !!}
{!! Form::label('', 'Interprete', ['class' => 'control-label']) !!}
{!! Form::text('interprete', 'Lorem ipsum.', ['disabled' => 'disabled','class' => 'form-control']) !!}
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
{!! Form::label('', 'Texto de la cancion', ['class' => 'control-label']) !!}
{!! Form::textarea('letra_cancion', 'Lorem ipsum dolor.', ['class' => 'form-control','id' => 'textareacancion']) !!}
</div>
</div>
<div class="row">
<div class="col-md-3 form-group" >
{!! Form::submit('Inserta en base de datos', ['class' => 'form-control btn btn-info','id' => 'obtenletra']) !!}
</div>
</div>
{!! Form::close() !!}
MY AJAX FUNCTION
$(document).ready(function() {
var taginicial = $('input[name="taginicial"]').val();
var tagfinal = $('input[name="tagfinal"]').val();
var pagina = $('input[name="pagina"]').val();
console.log(taginicial);
console.log(tagfinal);
console.log(pagina);
$.ajax({
url: pagina,
crossDomain:true,
headers:{"Access-Control-Allow-Origin: *"},
type: 'POST',
dataType: 'xml',
data: {param1: 'value1'},
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
});
If in this function I omit headers, I get this error
Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en https://laravel.com/docs/5.3/routing (razón: falta la cabecera CORS 'Access-Control-Allow-Origin').
If I do not omit them and the data type I put in xml, jsonp or even omit the data type the result is this
SyntaxError: missing : after property id
I have tried different sites and have checked in their headers that the "Access-Control-Allow-Origin: *" is like this, What's wrong with me?