0

I have a form which has two input fields. One of them which allows white spaces gets value from the user. The second hidden input passes all data from the first input with removing all-white spaces.

I would like to send the second input's data to the ajax request as it doesn't have any white spaces. After that, I would like to control this data with API.

In ajax request, when I use data: $('#firstInput').serialize(), API returns null, if the user wants to use white spaces in the input.

When I use JSON.stringify(), I get a cross-origin frame error:

Blocked a frame with origin "http://localhost.dev" from accessing a cross-origin frame.`

Using Access-Control-Allow-Headers etc. doesn't work. To be able to overcome this problem, after some researches, I decided to use param() and split() functions. In this way, I get the result I want in console.log().

How can I send the last split object to the ajax request in the data field?

var firstInput = $('#firstInput').val();
var trimInput = firstInput.replace(/\s+/g, '');
var hiddenInput = $('#hiddenInput').val(trimInput);

var paramFunc = jQuery.param(hiddenInput);
var splitFunc = paramFunc.split("=");
var result = splitFunc[1];

$.ajax({
                            url: url,
                            type: "POST",
                            data: JSON.stringify(hiddenInput), //Gives: Blocked a frame with origin "http://localhost.dev" from accessing a cross-origin frame error
                            data: {"data": result}, // It returns null
                            success: function (response) {
                                console.log(response);
                            },
                            error: function (err) {
                                console.log(err);
                            }
                        });
Madame Green Pea
  • 187
  • 1
  • 3
  • 13
  • are you sure that `result` is not null ? – Devsi Odedra Jul 30 '19 at 13:19
  • 2
    not sure why JSON.stringify would cause that error...That error has to do with the url you are posting too, not the data. – epascarello Jul 30 '19 at 13:20
  • Yes, I am sure when I console.log before the ajax request, it gets values from the input. @DevsiOdedra – Madame Green Pea Jul 30 '19 at 13:23
  • Seems like a strange setup for managing the data. Provide a [mcve]. Also what is expected format server side? – charlietfl Jul 30 '19 at 13:29
  • this is a security check, you are trying to access different domain, do you? it could be missing crossdomain attribute. and you can try to call serialize function on form element instead of input value – Lety Jul 30 '19 at 13:39
  • Actually, I make a request from an API service to control the data with the post method. I define the related API controller in the route file. And I call my defined localhost route in the ajax URL. My framework is Laravel, I also defined `'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')` in headers. Is it because I send a request in controller for an API service? @Lety – Madame Green Pea Jul 30 '19 at 13:50
  • X.CSRF-TOKEN is used to prevent user’s web browser to perform an unwanted action on a trusted site when the user is authenticated, in your case the error suggest that you are sending an ajax request to a different origin, this is normally forbidden unless you configure your server to accept it and tell to your browser that your request is a cross site request. Sorry, but I don't know Laravel. You can read this: https://www.owasp.org/index.php/Test_Cross_Origin_Resource_Sharing_(OTG-CLIENT-007) to understand CORS request and see if it is your case. – Lety Jul 30 '19 at 15:28
  • ma be this: https://stackoverflow.com/questions/56960709/rails-font-cors-policy could help – Lety Jul 31 '19 at 11:27

0 Answers0