How i can submit form data from front end to app

Shopify Discussion
1

Hello

I am working on shopify App which is also communicate with front end. I want to submit form data from front end to app data base by ajax but i am facing “Blocked by CORS Policy”

as been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource

above is error i am facing please do help me how i can solve this issue. i am working in app with PHP

2

Can you please confirm

what backend you are using ?

It is hosted on cloud or ngrok ?

Are you using https ?

Can add more accurate answer if you provide more specifications

3

I am using PHP+mysql in app backend
my app is hosted on heroku server
yes i am using https

I have create a popup form on product detail page i want track form data into APP database in mysql
i have attach 2 screenshot please check if you understand what is the issue

4

Thank you for sharing the details @vinodk

This article might help you understand more about CORS www.html5rocks.com/en/tutorials/cors/

You only need to set Access-Control-Allow-Origin for NON OPTIONS requests

PHP Code :

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;
}

ajax Request should be :

$.ajax({
    type: 'POST',
    url: 'https://yourdomain.com/routes/postForm',
    crossDomain: true,
    data: '{"some":"json"}',
    dataType: 'json',
    success: function(responseData, textStatus, jqXHR) {
        var value = responseData.someKey;
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('Something went wrong');
    }
});

Hope it will help

5 
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;
}

in http://from.com what should i set my app domain path or store url ?
because store maybe differ only app url should be fixed.

also i am using JavaScript Ajax can you tell JavaScript Ajax example. above is jquery ajax example

6

if you will say i will send you my code
form data track code in the app
and sending ajax request from front end store ?

7

You need to specify the PHP method or API in the URL.

If it is a core Javascript post request this may help :

var request = new XMLHttpRequest();
var params = "action=something";
request.open('POST', url, true);
request.onreadystatechange = function() {if (request.readyState==4) alert("It worked!");};
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.send(params);