I built a pos application in Laravel and hosted it on a shared hosting server. on the live server when I try to send ajax request multiple times to add products from the right side pane(by clicking image one after one) it starts responding 403 forbidden after some request.
Any help, what I can do to prevent this, and what is the cause?
The reason behind the 403 is that laravel reject request if default request limit is reached out of limit. You can set the number of requests per min as per your project in app/Http/Kernel.php.
'api' => [
'throttle:150,1', // 150 requests per min
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
Related
I am trying to understand how InertiaJS handles Laravel Redirects using back().
In the InertiaJS docs, this section:
Redirects
When making a non-GET Inertia request, via or manually, be sure to always respond with a proper Inertia response.
For example, if you're creating a new user, have your "store" endpoint return a redirect back to a standard GET endpoint, such as your user index page.
Inertia will automatically follow this redirect and update the page accordingly. Here's a simplified example.
For instance, in Laravel, when trying to reset the user password, the user clicks on the "Email Reset Link". This action on the server ends with a back()->with(). I've studied this request inside DevTools, and I can see a 302 Response with a Location response header.
It seems Inertia is intercepting this 302 response & requesting the Location specified.
In general, as far as I know, 302 are handled by the Brower, however, in this case, after the 302 requests, I see a GET request sent to the server for the Location with a request header of 'x-inertia': true.
Is it really InertiaJS handling this or does the browser send a GET request to the URK specified in the Location header and appends all headers from the previous request that caused the 302?
Appreciate your help,
Bill
I deployed a FastAPI based backend on Heroku and whenever I query the url via cURL or Postman, it works fine. However, when it queried from a chrome extension (built on React for Github), it throws
Access to fetch at '<API>' (redirected from '<API>') from origin 'https://github.com' has been blocked by CORS policy: 'No-Access-Control-Allow-Origin' header is present on the requested resource.
Funny thing is that the request runs fine for most of the time but when the server is not queried for about 10 mins, it first throws this error 2-3 times then the subsequent requests succeed.
From the frontend, Javascript fetch API is used to query the API with method & Content-type header.
To set up CORS policy on backend, I followed this CORS docs. Following is the snippet:
app = FastAPI()
origins = [
"https://github.com",
"http://localhost:8000" # dev
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
I am not able to understand if this issue is from frontend, backend or Heroku free dyno going to sleep. Thanks.
The request to your API is most likely coming from "Origin": "chrome-extension://..."
You can change your FastApi controller to
origins = ["*"]
That should give you a temporary fix.
As far as adding your specific Chrome extension to the allowed origins ...that's what I'm on here searching for lol.
I have a problem when I want to create an authentication system using VueJs as the frontend (http://localhost:8080/#/login) and Laravel 5.6 as the backend. When I try to submit login form using the api login url http://127.0.0.1:8000/api/v1/login, I get the error message:
Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at http://127.0.0.1:8000/api/v1/login.
(Reason: CORS request did not succeed).
I don't know how to solve this problem.
Could anyone here help me to solve my problem?
NOTE : I have to install laravel-cors before
This is an old question, but I'll reply nonetheless.
For me this error was caused by a self-signed certificate. If you open developer tools, select the network tab, click the call that failed CORS you can see the security tab. Click it to open it. If a cert is giving you problems the text "An error occurred: SEC_ERROR_INADEQUATE_KEY_USAGE" should be visible.
To resolve this just go to the URL that gave you the CORS error, and accept the cert manually.
Cross Origin Resource Sharing is a mechanism that uses additional HTTP headers to tell a browser to allow the web application running on one origin (client) have permission to access selected resources from a server at a different origin.
Basically, your Vue app (http://localhost:8080) needs to be allowed access to your Laravel endpoint (http://127.0.0.1:8000/api/v1/login) This is to prevent me from hitting your Laravel endpoint from my malicious website and acting like an authenticated user.
Based on the docs, you need to add 'allowedOrigins' => ['*'], but that means you're opening up your backend to all requests. That's fine if it's a public API but in this context it doesn't sound like you want that. Instead, in this case it would be 'allowedOrigins' => ['localhost:8080'], so that your Vue app can consume your Laravel server.
You have to use either localhost or 127.0.0.1 for all the requests. In general in your code you should make calls to the server by just appending the URI to the current host, without re-adding the host and port in the URI string. If you load your page from a given host, for example 127.0.0.1 and then try to make an AJAX request to another host, for example www.host.com, the request gets blocked to prevent XSS attacks
It sounds like you are running this in dev mode via webpack currently? If that is correct and your workflow is that you are going to build the Vue application and have it co-reside with your Laravel backend then you just need to update config/index.js to have a proxyTable entry that forwards webpack requests to the correct dev Laravel backend server.
This would look something like this.
module.exports = {
dev: {
proxyTable: {
"/": "http://127.0.0.1:8000/api/v1/login"
}
}
}
There is additional information available on how this works; https://vuejs-templates.github.io/webpack/proxy.html
I was stuck with this error recently while I was trying to get one of our old websites hosted via Azure (App Services) up and running again.
Reason: CORS request did not succeed was the error showing in the browser console, however, it turned that for our case the URL mentioned in the CORS error doesn't exist anymore - its referring to the old https://******.azurewebsites.net service url we had (previous hosted in Azure - App Services).
So also check that the URL mentioned in the CORS-error is in fact working.
In my case the computer was not displaying the correct date and time. When I try to view the page I would get the "CORS request did not succeed." Once I updated to the correct time and date the page displayed normally.
I had to change the base URL of axios. I didn't notice it was https://, not http://
file: src\store\index.js
change the
axios.defaults.baseURL = 'https://127.0.0.1:8000/api'
to
axios.defaults.baseURL = 'http://127.0.0.1:8000/api'
Note: Make sure it's exactly same URL and Port. You can see that in terminal where you start the laravel application (php artisan serve).
I have a Laravel-made API running in a server and an Angular application running in another server. My Angular app loads a huge JSON file (with more than 500 lines) and tries to insert each line in a database through the api. A request is sent for each line, so I get an 409 error (too many requests).
I know this is a matter of security, so I don't want to remove the throttle from my middlewareGroup array in Kernel.php. I'd like to know, however, if there's any chance I can turn this rate limit down for a specific origin address (http://www.myangularapp.com/ only, for example)? So I can send these various requests while keeping the rate limit for other origin addresses.
Thanks in advance!
We currently have an API running on a cluster of servers, with Apache. Every response from the API is JSON.
I've been playing around with the http://ionicframework.com/ framework, which uses Angular JS as it's Javascript base. It's got to the point where I want to make requests from the web app I'm working on, with Angular:
$http.get('http://myapi.com/getData').success(function(data) {
console.log(data);
});
Now of course, I get the error:
XMLHttpRequest cannot load http://myapi.com/getData. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
Now this is obviously a CORS issue, and I understand why. One solution for this would be to set Header set Access-Control-Allow-Origin "*" on the servers, however opening up the entire API to any cross site request is surely risky?
Instead, is there no way for me to set some form of key/security which the server checks against to make sure it's coming from the app I'm building.
The angular $http docs have:
xsrfHeaderName – {string} – Name of HTTP header to populate with the XSRF token.
xsrfCookieName – {string} – Name of cookie containing the XSRF token.
Where would I check for these on the server, and what is a secure way of doing this?
JSONP is not an option, since the API can't be changed in it's current state.