Slim Framework v3 api call from angularjs $http

Question

I have been struggling with this issue from past few days.

I have created api using slim framework v3 in php.

and when i call any route from angularjs $http i get console error as:-

XMLHttpRequest cannot load http://192.168.0.5/project/api/testing. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

<?php
use Psr\Http\Message\ServerRequestInterface as Request;
use Psr\Http\Message\ResponseInterface as Response;

require 'vendor/autoload.php';
require 'app/config/configuration.php';

$app = new Slim\App(["settings" => $config]);
spl_autoload_register(function ($class_name) {
require("app/" . $class_name . ".php");
});

$app->get("/testing",function(Request $request,Response $response){
     generateResponse($response,array("message"=>"success"));
});
function generateResponse($response, $data)
{
 return $response->withStatus(200)
    ->withHeader("Content-Type", "application/json")
    ->withHeader("Access-Control-Allow-Origin", "*")
    ->withHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
    ->withHeader("Access-Control-Allow-Headers", "Content-Type, Depth, User-Agent, X-File-Size,X-Requested-With, If-Modified-Since,X-File-Name, Cache-Control, x-hash-key, x-req-timestamp, user-language-pref, Content_Language")
    ->write(json_encode($data));
 }

 $app->run();

I have added headers in response. But still when i call testing route api from $http it throws error.

Am totally blank i know am just missing something silly. Please help me out to solve this thing.

Thanks

UPDATE: SOLUTION

By adding header in php file it is working now. header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS'); header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');

Please note this link it might be handy some days:- Click to go->

The problem is that you have not implemented CORS... http://stackoverflow.com/questions/38005829/cors-post-request-fails/38035128#38035128 — geggleto, Jul 18 '16 at 15:37

score 1 · Accepted Answer · answered Jul 17 '16 at 17:18

1

One thing is that there's missing return on line 14:

return generateResponse($response,array("message"=>"success"));

You can check whether the headers are present in the response in the browser's dev console.

From a quick review this seems as the only issue.

answered Jul 17 '16 at 17:18

Jiri

435
2
8

am returning response inside generateResponse so i dont think that we need to return it again. And i did check in browser for headers. When i call api from browser it is working but when i call via ajax in angularjs it is not working – RKD Jul 18 '16 at 15:58
No, you're not. generateResponse() returns a new copy of $response but this value is discarded in the scope of $app->get() method because it is not stored anywhere. The reason why it works in your browser is that when called directly, CORS do not apply. As I wrote in my answer, check the response headers in the browser's developer console where you will see neither Access-Control-Allow-* nor Content-type headers. When called from angular (AJAX in general, when in comes to it) from another domain, you need to allow CORS. That does not happen without the piece of code from my answer. – Jiri Jul 19 '16 at 06:23
yes so can u help me a little bit of how could i enable cors in angularjs. As of now as u can see in my code i have added headers in response so i dont think i need to do anything extra with php code. – RKD Jul 21 '16 at 03:05
sorrry it is working now PHP header was wrongly set. – RKD Jul 21 '16 at 04:16
Mate, it's all over again - you are NOT sending those CORS-enabling headers from Slim. The `$response` you created inside `generateResponse()` is never sent back to the browser because you discard it in `$app->get`. Just add `return` on line 14 as I suggested and it will work without any extra code. – Jiri Jul 21 '16 at 05:27
Thanks bro it is working now. It was not response header. On top of all i had to set headers for requests. And there is no need to return because generator function is writing the json data hence return is not required inside that function. Thanks. – RKD Jul 27 '16 at 02:24

Slim Framework v3 api call from angularjs $http

1 Answers1