I am new with GraphQL. I need to make an API with PHP and GraphQL.
I followed this tutorial:
https://medium.com/swlh/setting-up-graphql-with-php-9baba3f21501
everything was OK, but when opening the URL, I got this error:
{
"statusCode": 405,
"error": {
"type": "NOT_ALLOWED",
"description": "Method not allowed. Must be one of: OPTIONS"
}
}
I added this to the index page :
header('Access-Control-Allow-Origin', '*');
header('Access-Control-Allow-Headers', 'content-type');
header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
but the problem wasn't resolved.
Maybe something is missing here:
return function (App $app) {
$app->options('/{routes:.*}', function (Request $request, Response $response) {
// CORS Pre-Flight OPTIONS Request Handler
return $response;
});
Error Message : Method not Allowed
Error Status Code : 405
Reason :
Actually we get this error as response to our option request not to our Post request. Browser sends option request before it sends POST, PATCH, PUT, DELETE and so on.
GraphQL declines anything that is not GET or POST so option request is declined
Solution :
Go to our cors middleware and check if its option then returns empty response with status 200. So in this way option request will never reach to GraphQL middleware
Like :
if (req.method === "OPTIONS") {
return res.sendStatus(200);
}
as
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Methods",
"OPTIONS, GET, POST, PUT, PATCH, DELETE"
);
res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
if (req.method === "OPTIONS") {
return res.sendStatus(200);
}
next();
});
$app = AppFactory::create();
Add
$app->setBasePath("/project/public/index.php");
Related
Let's say I have a next js application which exists in a different domain that needs to call a laravel route. This route leads to a login page.
This is what I did on react side
const handleSubmit = async (e) => {
e.preventDefault();
try {
const result = await axios.get("http://localhost:5001/login", {
headers: {
// "content-type": "application/json",
"x-api-signature": "my-secret-token",
},
});
console.log(result);
} catch (error) {
console.log(error);
}
};
I am getting cors error on front end
// In Laravel auth.php
Route::get('login', [AuthenticatedSessionController::class, 'create'])
->name('login');
This route leads to a simple login page.
You can use CORS Middleware for Laravel
Or by using middleware, something like (not tested)
Note that https://stackoverflow.com should be your app domain.
class Cors
{
public function handle($request, Closure $next)
{
return $next($request)
->header('Access-Control-Allow-Origin', 'https://stackoverflow.com')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
->header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, X-Token-Auth, Authorization');
}
}
Read
Laravel CORS Guide: What It Is and How to Enable It
Just started a new project with CodeIgniter and after installation with composer I noticed the following warning in Routes.php:
// The Auto Routing (Legacy) is very dangerous. It is easy to create vulnerable apps...
So following the suggestion I set:
$routes->setAutoRoute(true);
and in Feature.php:
public bool $autoRoutesImproved = true;
My default route in Routes.php at the moment:
$routes->get('/', 'Authentication::index');
This is the Authentication controller
class Authentication extends BaseController {
public function index(): ResponseInterface {
...
return $this->response
->setBody($this->twig->render('login/view.twig'))
->setStatusCode(302);
}
public function postLogin(): ResponseInterface {
$authModel = new AuthenticationModel();
$response = $authModel->verifyLogin($_POST['loginUsername'], $_POST['loginPassword']);
return $this->response
->setBody($response)
->setStatusCode(200);
}
}
When I go to http://localhost:8080 the login page loads as it should.
I perform an AJAX request on the login page to verify the user credentials so that the latter can log in; but I am getting 404 on the following URL: http://localhost:8080/authentication/login
This is the AJAX request:
pageLoginForm.on('submit', function(e) {
let isValid = pageLoginForm.valid();
if (isValid) {
e.preventDefault();
$.ajax({
type: 'POST',
url: _baseUrl + 'authentication/login',
data: pageLoginForm.serializeArray(),
success: function (response) {
response === 'login' ? window.location.reload() : $('#errorMsg').text(response);
},
error: function () {
$('#errorMsg').text('An error occurred!');
}
});
}
});
I added the prefix "post" to my controller method as instructed by the documentation but it's not working.
Am I missing something?
It's a really frustrating issue with the pre-flight. Ajax made an options request to know if post is enebled. To solve this, make a controller to handle options requests whith:
php spark make:controller options
So modify controller in this way:
public function index()
{
return $this->optionsHandler();
}
public function optionsHandler(){
header("Access-Control-Allow-Headers: Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token");
header("Access-Control-Allow-Methods: GET, PUT, POST, DELETE, PATCH, OPTIONS");
header("Access-Control-Allow-Credentials: true");
header("HTTP/1.1 200 OK");
return die();
}
Then inside Config/Routes.php Add:
$routes->options('(:any)', 'Options::optionsHandler');
Take a look how I've implemented this in my project:
https://github.com/Akir4d/AOP
I hope this helps!
I'm building an API to activate and validate active installations of my PHP Scripts,
but I get the "Access to XMLHttpRequest at 'http://api.domain.te/requests/verify' from origin 'http://domain.te' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource" error on console.
Here is my jQuery code:
function verify() {
$.post(url+"requests/verify", {
domain: domain
}, function(data) {
if (data.success === true) {
return true;
}
});
return false;
}
I have read through similar questions and tried all the suggestions, but none seems to be working.
On my PHP code I have:
public function verify()
{
$data['success'] = false;
$data['status'] = 'error';
$data['message'] = 'An error occurred';
if ($this->actives_m->check($this->request->getPost("domain")??""))
{
$data['success'] = true;
$data['status'] = 'success';
$data['message'] = 'Product is Active!';
}
else
{
$data['message'] = 'Product is Inactive!';
}
$this->response->setHeader('Access-Control-Allow-Origin', '*');
$this->response->setHeader('Access-Control-Allow-Methods', 'GET, POST');
return $this->response->setJSON($data);
}
I have also tried setting the headers at the beginning of the script after <?php but still did not work.
I also tried the built in PHP header() function like so:
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
I have even modified my JS to look like:
function verify() {
$.ajax({
url: url+"requests/verify",
type: "POST",
dataType: "JSON",
data: {domain: domain},
crossDomain: true,
success: function(data) {
if (data.success === true) {
return true;
}
}
});
return false;
}
So far nothing seems to be working, Where should I go from here?
UPDATE:
I realize that if I use Pure Javascript like:
const xhr = new XMLHttpRequest();
xhr.open('GET', url+"requests/verify");
xhr.onreadystatechange = function(data) {
if (data.success === true) {
return true;
}
}
xhr.send();
It works as expected, but I have to use jQuery to keep my code uniform, and for future reference.
Whenever, there is a cross-origin issue, there are two routes that are hit. Lets say in your example, you have GET request to "http://api.domain.te/requests/verify", So before hitting your server with GET request it will hit same url with OPTIONS request. This verifies whether your server allows the API for the Cross Origin Request.
So In CI4 routes you have to define same URL or include a wild card to enable your cross origin request.
Here, the following example is for wild card request.
$routes->options('(:any)', 'Controller/options');
Here this route matches any routes with OPTIONS method and a single method called Options is there to handle it.
This options method can be defined as follows :
public function options($any)
{
return $this->response->setHeader('Access-Control-Allow-Origin', '*') //for allow any domain, insecure
->setHeader('Access-Control-Allow-Headers', '*') //for allow any headers, insecure
->setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE') //method allowed
->setStatusCode(200); //status code
}
What this method essentially does is lets the browser know that request are allowed for Cross-Origin, with status Methods such as GET, POST, PUT and DELETE.
After browser hits this request, it will be directed to your request which should also have cross origin enabled as follow:
$this->response->setContentType('application/json')->setJSON($response)->send()->setHeader('Access-Control-Allow-Origin', '*');
Reference : https://carminemilieni.it/2019/09/19/resolve-cors-and-corb-in-codeigniter-4/
As you already do, CORS must be approached from the receiving server side, so I put headers from .htaccess in Apache sites (check how to do it if you use different server):
Header set Access-Control-Allow-Origin "*"
(in your case, it should be a * if can be multiple unknown domains)
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
(or the method ones if you want too)
Info and options on that header:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
You can check what headers are you sending out by using curl, do they appear?
curl -I http://api.domain.te/requests/verify
This is the first time I'm making a post method request from Angular to CodeIgniter rest API.
postUsertask(Userid,TaskName)
{
let body ={
userid:Userid, taskname:TaskName
};
console.log(body);
return this.http.post("http://localhost/ci-abc/api/add_task",JSON.stringify(body) )
.map(res => res.json());
}
API method in codeigniter:
function add_task_post()
{
$obj=json_decode(file_get_contents('php://input'));
$taskname = $obj->taskname;
$userid = $obj->userid;
if (!$taskname || !$userid) {
$this->response("Enter taskname and userid to add", 400);
} else
$result = $this->todo_model->add_task($taskname, $userid);
if ($result === 0) {
$this->response("Task could not be added. Try again.", 404);
} else {
$this->response("success", 200);
}
}
Had to include to access the data
$obj=json_decode(file_get_contents('php://input'));
Because the $this->input->post and $_POST were empty and the data recieved from angular was an object so had to be accessed with -> notation. I am curious that this is not the right and ethical way to do this. Also when I didn't put JSON.stringify it gave me Cross Origin Request blocked error so that's why I put it. How should I make POST and PUT request in angular4 to rest API in CodeIgniter?
How do I get rid of CORS error which doesn't let me call the API method, if I can get rid of CORS error then I could also remove JSON.stringify which will send the data as it is and I believe the data should be accessed via input->post or $_POST.
EDIT 2:
These sort of errors while making POST PUT and DELETE API call.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at http://localhost/ci-abc/api/del_task?taskid=34.
(Reason: CORS preflight channel did not succeed)
EDIT (Perfect Solution):
Found out that the formdata object approach was deprecated so I just included a header in options and included in the API call http.post method which works fine and is much better solution.
constructor(public http:Http) {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
let options = new RequestOptions({ headers: headers });}
createUser(userName)
{
let body = { username:userName};
return this.http.post("http://localhost/ci-abc/api/create_user",body,this.options)
.map(res => res.json());
}
Deprecated approach (Works but deprecated/not usual practice):
Took few hours but found the solution, I created body as a new formdata object, appended parameters to it as key and their values and it worked fine now I am retrieving through $this->input->post.
let body = new FormData;
body.append('userid', Userid);
body.append('taskname', TaskName);
console.log(body);
return this.http.post("http://localhost/ci-abc/api/add_task",body)
.map(res => res.json());
Using these headers in the constructor of my codeigniters API controller
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Access-Control-Allow-Origin');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
API method:
function add_task_post()
{
$userid = $this->input->post('userid');
$taskname = $this->input->post('taskname');
if (!$taskname || !$userid) {
$this->response("Enter taskname and userid to add", 400);
} else
$result = $this->todo_model->add_task($taskname, $userid);
if ($result === 0) {
$this->response("Task could not be added. Try again.", 404);
} else {
$this->response("success", 200);
}
}
I am working on a Hybrid application I want to sent json data to laravel php server using Ionic 2.
I am continuously getting error as
XMLHttpRequest cannot load http://192.168.0.101:8000/SaveUsers.
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8100' is therefore not allowed
access.
Ionic Code:
register-recipient-page.ts
this.registrationService.sendData(this.donarDetails,this.recipientDetails).subscribe(
response => console.log(response), // success
error => console.log(error), // error
() => console.log('completed') // complete
);
Ionic Code:
registration.service.ts
sendData(recipient,donar): Observable<Object> {
let encoded_data = JSON.stringify({recipientDetails:recipient, donarDetails:donar});
let headers = new Headers();
headers.append('Content-Type', 'application/json;charset=utf-8');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT,DELETE, OPTIONS');
//let headers = new Headers({ 'Content-Type': 'application/json;charset=utf-8' });
let options = new RequestOptions({ headers: headers });
console.log(encoded_data);
return this.http.post( 'http://192.168.0.101:8000/SaveUsers',encoded_data, options).map(
(res: Response) => res.json() || {}
);
}
laravel: web.php
Route::group(['middleware' => 'cors'], function(){
Route::get('/SaveUsers', 'UserController#saveUser');
});
Cors.php
public function handle($request, Closure $next){
return $next($request)
->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT,DELETE, OPTIONS');
}
I tried to do testing using simple get on the same url without sending any data, it was working fine.
Please help!!!!