CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[leonardosella]

Hi everyone, 

I'm trying to make a connection with the internal Intranet system. 

If I enable "Moesif CORS extension" for google chrome I'm able to send a POST to the server and this one answer with a positive message. 

So, the code that I used is similar to this one: 

$scope.authServices = function() {
  var xhttp = new XMLHttpRequest();
  var url = ''
  var url_home= 'http://localhost:3000/resource/test_API_auth_001/dist/index-desktop.html#/Home'
  //xhttp.setRequestHeader("Content-Type", "application/json");
  //xhttp.setRequestHeader("Access-Control-Request-Method", "POST");
  //xhttp.setRequestHeader("appKey", "xxxxxx");
  //xhttp.setRequestHeader("Accept", "application/json");

  
  xhttp.open('POST', url, false);
  xhttp.setRequestHeader("Access-Control-Allow-Origin", url_home);

  xhttp.onload = function () {
    if (xhttp.readyState === xhttp.DONE) {
      if (xhttp.status === 200) {
        console.log(xhttp.response);
        console.log(xhttp.responseText);
        $scope.app.params['ServiceResult'] = xhttp.responseText;
        text="---ok---"
		$scope.setWidgetProp( "authService", "text", text)
      }
      else{
        text="---ERR---"
		$scope.setWidgetProp( "authService", "text", text)
      }
    }
  };
  xhttp.send("{'username': 'xxxxxx', 'password': 'yyyyyyyy'}");
}


$scope.authServices();

The answer of the chrome console is: 

Access to XMLHttpRequest at 'http://intranet.xyz.it/i/api_auth_for_services.php' from origin 'http://localhost:3000' has 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.

Anyone has a solutions? 

[RolandRaytchev]

Hello @leonardosella ,

c

could you, please, provide more details about  what is the goal behind this action. I have to point that implementing a solution in chrome by adding some extensions /add on  if it works on chrome will probably not work in Vuforia View App on end device. The Studio preview mode is only a tool for testing and debugging of the Studio project where we nearly could check the app behavior but  it is not the end application case. /example mouse click, and hover are not available on the end device/

[leonardosella · Accepted solution]

Hi @RolandRaytchev , 

I found a solution with our php developer. This is the solution:  

1. add the header posted below:

$scope.api_auth_for_services = function() {
  	var api_auth_for_services= $scope.app.baseUrl
  	var data={}; //dati autenticazione
    
    // aggiunta Giovanni Panozzo 9.10.2020
    var req = {
      method: 'POST',
      url: api_auth_for_services,
      headers: {
        'Content-Type': 'text/plain'
      },
      data: data
    };

  
  	//var phpsid;
  	//chiamata api_auth_for_services
	$http(req).then(function (response) {    
		// check risposta
		if (response.data)
          	
          	//something
		}, function (response) {
      		//something
    	}
   	);
  
}

 2. Modify the header of your php page in accord to your content type. 

[RolandRaytchev]

OK, fine , thanks for the feedback. 

So far I understand you want to send a post request to a  server which is outside of the current domain and this will work on chrome with  the mentioned extension.

What is the result when you test in Vuforia View app on end device?  IOS, Android or HoloLens? This will be very helpful feedback if this work there.

Thanks!

[leonardosella]

It's all working on IOS device. Not tested on Hololens or other dev.