I am currently making an Ionic/Cordova-application with Laravel 5 as a Rest-server (my first time coding a PHP-server).
With Postman all my Get/Post/Update/Delete-functions work on Laravel, and on clientside (Ionic Cordova). I am able to send data to http://postcatcher.in using Chrome Allow-Control-Allow-Origin plugin.. Without the plugin, I get this error:
Since this problem apparently only happens in development-mode (when testing client-side in browser), I assume it's alright to develop with the plugin.
When I try to send data to Laravel through Ionic Cordova, I get this error (even with the Allow-Control-Allow-Origin plugin:
I have tried multiple things, such as https://github.com/barryvdh/laravel-cors, which just doesn't seem to work for me. Neither does suggestions in this forum, using CORS-middlewares. https://laracasts.com/discuss/channels/requests/laravel-5-cors-headers-with-filters
I assume that this is a Laravel-issue, but I am not 100% sure.
To publish the server, I use
php artisan serve, giving it localhost:8000.
For the application, I write: ionic serve, which gives it localhost:8100.
At last, this is the code I use to send data on Ionic-side:
.factory('userFactory', function($http, $q) {
return{
createuser : function(info) {
var deferred = $q.defer();
$http.post('localhost:8000/users', info)
.success(function(response, status){
deferred.resolve(response);
})
.error(function() {
console.log('SOMETHING WENT WRONG');
});
return deferred.promise;
}
}
})
Any help is really appreciated. Really stuck with this issue.
So it turns out that I'm an absolute idiot. I just needed to write "http://" in front on the URL. Rookie mistake.
EDIT: I'll keep the question open for just half an hour, in case anyone has advice for me.
Related
I have this weird problem. It works fine on my local machine. But the problem happens when I upload this project on the live server (in a sub-domain for testing purposes). GitHub Repository
The project has one Model (other than User), "Post"
The project has one route and one API endpoint. Initially, I should get the same results from both the web route and API endpoint. The problem is when I delete a post from the web, the API result still shows that deleted post. The API returns updated results after 20-30 minutes.
Very strange issue.
If anyone knows anything about such an issue, please help me out.
I am using Livewire
App\Http\Livewire\Posts.php
public function render()
{
$posts = DB::table('posts')
->select(DB::raw("
posts.id AS id,
posts.title AS title,
posts.category AS category,
posts.author AS author
"))
->orderBy('posts.category')
->get();
$data = [
'posts' => $posts
];
return view('livewire.posts', $data);
}
api.php
Route::get('posts', function() {
$posts = DB::table('posts')
->select(DB::raw("
posts.id AS id,
posts.title AS title,
posts.category AS category,
posts.author AS author
"))
->orderBy('posts.category');
return response()->json($posts->get(), 200);
});
Actually, it was my fault. I did try
php artisan cache:clear
php artisan optimize:clear
And it did not work since there was a caching configuration in Nginx.
You know, when you are a noob at server management and end up using a nice and ready solution like myvestacp, you may end up making silly mistakes like this.
The way myvestacp is configured, it utilizes a combination of Apache and Nginx (as proxy). Without knowing the outcome, I had set the Nginx proxy as "caching" instead of "hosting-public". This is why the API result would get cached and only update after some time.
I did not face any issues so far because I did not use API before.
But thank you anyway for your time and effort.
When testing my application and trying to create a new user then on form submission I am getting error 419.
If I use a helper to log in using Auth::loginUsingId(x) for an existing user then dd(auth()->user()) is successful but when I redirect to another page the user is no longer logged in. eg running the following code, you end up getting redirected to /login:
Route::get('/logInAs/{id}', function ($id) {
Auth::loginUsingId((int) $id);
dd(\auth()->user());
return redirect()->route('dashboard');
});
I would share more code but I'm not sure what would be useful at this point?
I've probably spent about seven hours trying to fix this so far. It's driving me up the wall!
The app works fine on other environments, such as staging. I've even gone so far as to re-download it from github as a fresh install (in case I was messing about in vendor directory and changed something), but that hasn't fixed it.
I get the same issue on Chrome, using different signed in users on Chrome, using incognito mode on Chrome, using Firefox, and using valet share and accessing my local version on another device, like a phone, so I don't think it is to do with browser caching.
When other devs working on the project run it locally on their machines I haven't had reports of this issue, so it seems to just me my local environment.
I've variously tried changing CACHE_DRIVER and SESSION_DRIVER in .env to no joy, but I'm beginning to lose the will to live so don't really know if I'm doing the right thing there - please help if you can!!
Edit to add more detail:
Middleware on the dashboard route:
Route::middleware(['auth:sanctum', 'verified'])->group(function(){
Route::get('/dashboard', DashboardController::class)->name('dashboard');
});
If I remove the middleware then I just get an error that user is null on dashboard.blade.php, ie the user is still not staying logged in.
A custom middleware:
class VerifyUserIsMerchant
{
public function handle(Request $request, Closure $next)
{
if ($request->user()->isMerchant()) {
return $next($request);
}
throw new AccessDeniedHttpException('You must be a merchant to access this page');
}
}
If I dd($request->user()) in this middleware it returns null.
The issue got fixed with the help of Laracasts. The full answer is here.
In short, I needed to remove the http:// protocol from SESSION_DOMAIN in .env and set it to match APP_URL.
This was the correct answer for this issue. It was deleted by a moderator. Moderator, before you delete this answer as well please can you explain why?
It provides the full answer to the issue raised in the question. I did not find this answer to this issue anywhere else (hence why it took me several days of debug to fix).
If I can know why it was deleted, I can then understand how to avoid making answers in the future that also would be deleted. Thank you.
I am starting a new project, Nuxt.js for the frontend and Laravel for the backend.
How can I connect the two?
I have installed a new Nuxt project using create-nuxt-app, and a new laravel project.
As far as I have searched, I figured I need some kind of environment variables.
In my nuxt project, I have added the dotenv package and placed a new .env file in the root of the nuxt project.
And added CORS to my laravel project, as I have been getting an error.
The variables inside are indeed accessible from the project, and im using them
like this:
APP_NAME=TestProjectName
API_URL=http://127.0.0.1:8000
And accessing it like this:
process.env.APP_NAME etc'
To make HTTP calls, I am using the official Axios module of nuxt.js, and to test it i used it in one of the components that came by default.
The backend:
Route::get('/', function () {
return "Hello from Laravel API";
});
and from inside the component:
console.log(process.env.API_URL)//Gives 127.0.0.1:8000
//But this gives undefined
this.$axios.$get(process.env.API_URL).then((response) => {
console.log(response);
});
}
What am I doing wrong here?
I have tried to describe my setup and problem as best as I can. If I overlooked something, please tell me and I will update my question. Thanks.
Taking for granted that visiting https://127.0.0.1:8000/ in your browser you get the expected response, lets see what might be wrong in the front end:
First you should make sure that axios module is initialized correctly. Your nuxt.config.js file should include the following
//inclusion of module
modules: [
'#nuxtjs/axios',
<other modules>,
],
//configuration of module
axios: {
baseURL: process.env.API_URL,
},
Keep in mind that depending on the component's lifecycle, your axios request may be occurring in the client side (after server side rendering), where the address 127.0.0.1 might be invalid. I would suggest that you avoid using 127.0.0.1 or localhost when defining api_uris, and prefer using your local network ip for local testing.
After configuring the axios module as above, you can make requests in your components using just relative api uris:
this.$axios.$get('/').then(response => {
console.log(response)
}).catch(err => {
console.error(err)
})
While testing if this works it is very helpful to open your browser's dev tools > network tab and check the state of the request. If you still don't get the response, the odds are that you'll have more info either from the catch section, or the request status from the dev tools.
Keep us updated!
Nuxt has a routing file stucture to make it easy to set up server side rendering but also to help with maintainability too. This can cause Laravel and Nuxt to fight over the routing, you will need to configure this to get it working correctly.
I'd suggest you use Laravel-Nuxt as a lot of these small problems are solved for you.
https://github.com/cretueusebiu/laravel-nuxt
Hi I am using Vuejs in the frontend and Laravel in the backend. The role of Laravel is handling the API only. The frontend and backend are separated, i.e. I am not using Vuejs in Laravel's resource/js folder.
Now I am sending Axios POST request from Vuejs to Laravel. All the form input values are prevalidated using HTML5 required attribute. And when I console.log the request data, it shows all the fields filled.
In Vue file:
const data = {
name: this.name,
gender: this.gender,
mobile_no: this.mobile_no,
image: this.userImage
};
console.log("Request data . . . .", data);
const response = await this.axios
.post(`${this.AppURL}/admin/user/create`, data, {
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(() => {
console.log("Success. . . . ")
alert("Successfully Driver Added");
})
.catch(error => console.log(error));
And in Laravel, the request is passed through some validation. It's a simple validation to check if all the fields are filled.
I am also using JWTAuth package for the authentication, and the token is generated by it.
It's too much code to write them all the way down here. But I am sure you can understand what I mean.
What I am getting as a response is this
POST http://localhost:8000/api/admin/user/create 422 (Unprocessable Entity)
The actual result I am expected to get is either success or some errors that is according to some if conditions in validation or token check.
I tried to figure out where this error might come from. What I think at the moment is this could be due to the absence of csrf_token in the POST request. As I'm sending the request outside Laravel, csrf_token is missing in the form. I am not 100% sure though about this.
So my question is:
How can I include csrf_token in Axios POST request, when I send it from outside Laravel.
If this 422 error is not related with csrf_token, what could be causing this? Any previos experiences like min? and any solutions for this?
Thanks in advance for your help.
Please, modified catch block as #Jack suggested:
.catch(error => {
console.log("ERRRR:: ",error.response.data);
});
Now you can get errors and handle errors in the catch block.
.catch(function (error) {
console.log(error.response.data.errors);
});
please use this code I hope it work's.
I was also facing the same issue, i think it is due to some Headers missing in your Api request from vue.js. here some tips which may helps you to solve this issues.
Make sure that you are protecting your Api Routes or not(by sanctum or something else). If you are protecting , then make make sure that you are sending authentications token in headers.
Second make sure that your request(axios or jwt) should contained valid data, if your are sending images or files etc make sure how can we send them.
First, get request and check in laravel by dd($erquest->all()); if you are geeting data then validate, it is possible that laravel request doesnt contained your sending data..
These errors may be caused due to follow reasons, ensure the following steps are followed.
To connect the local host with the local virtual machine(host).
Here, I'am connecting http://localhost:3001/ to the http://abc.test
Steps to be followed:
We have to allow CORS, placing Access-Control-Allow-Origin:* in header of request may not work. Install a google extension which enables a CORS request.
Make sure the credentials you provide in the request are valid.
Make sure the vagrant has been provisioned. Try vagrant up --provision
this make the localhost connect to db of the homestead.
Just click on the preview tab within network section in the dev tool, you are going to see the actual error message.
I am extremely new to using phonegap,codeigniter and jQuery Mobile (My first project) and have currently created an app with jQuery Mobile on the Client side and on the Server side I used the Codeigniter framework to create a RESTful API. Now when I am developing locally the app with in the browser (not yet using phonegap) communicates just fine with the API and no problems occur.
I placed the Codeigniter API on a server yesterday and I am now encountering 2 problems:
The App which was built using jQuery Mobile keeps getting the
following error:
Origin localhost is not allowed by Access-Control-Allow-Origin.
Now I have done some reading up and most people say to use jsonp instead of json and also to use the following on the Server Side:
$CI->output->set_header("Access-Control-Allow-Origin: *");
$CI->output->set_header("Access-Control-Expose-Headers: Access-Control-Allow-Origin");
$CI->output->set_status_header(200);
$CI->output->set_content_type('application/json');
Now my problem is I'm not entirely sure which one is used to fix the problem, weather it is both that need to be implemented etc. If they need to be fixed, how is it done? Is there a place that is well documented that can teach me how to deal with this problem, preferably I would like some where to read up on so I can learn?
The second problem is when I place the jQuery Mobile app into
phonegap and build it for Android. The app fails to get the
data from the server. Now is the reason for this because of the cross
domain error above or is this problem different? I also did some
reading up in this section as well and to my Android config.xml I
added the following code:
But I'm I still can't pull anything from the server. Like I said I'm a bit of a newbie but would really appreciate some help in this matter. Also I am aware that I haven't posted code but based on the comments I'll post which ever code the community needs to help solve this problem, just simply specify which code. Thank you for the help in advance!
About the Access-Control-Allow-Origin problem, I faced the same error and solved by placing this line <?php header('Access-Control-Allow-Origin: *'); ?> in the index.php which is in the root of the project.
This question hasn't been answered 100% but for now thanks to the help of #Niloy Saha, to fix the Access-Control-Allow-Origin error with with the Codeigniter RESTful frame work simply go to your controller in the Controller folder and right at the top paste;
header('Access-Control-Allow-Origin: *');
This then should allow you to communicate from the browser to the server and be able to get a response. After a good for hours of trying I managed to fix my problem. With in the Android project in the res/xml folder there is a file called config.xml. In that file be sure to have the following code:
<access origin="http://10.0.2.2*" subdomains="true"/>
and also make sure you have the following:
<uses-permission android:name="android.permission.INTERNET" />
in your AndroidManifest.xml. For me that seemed to get everything to work
I did similar thing as yours, Zend FW with API on server and jQuery Mobile App.
I've used JSONP, didn't use any Access-Control-Allow-Origin headers.
I have a method in my controller:
function returnData($data) {
header('Content-type: text/javascript');
echo $_GET['callback']. '('. json_encode($data). ')';
die();
}
At the end of API call i use it to return data.
Getting data in jQuery:
$.ajax({
dataType: "jsonp",
url: url,
data: {someparam: 'value'},
success: function(data) { /* ur data is here */ }
});