Angular not making CORS preflight - php

I'm trying to build a new API using Lumen (even though I'm having second thoughts about that), and am trying to use barryvdh's CORS package. I think I have it setup properly, so decided to do a simple request in angular to the default route setup.
With my current, manually setup API, when I make an API request, I always see 2 requests: the first being an OPTIONS request, the second being the POST/GET/DELETE/whatever. When I hit the Lumen api (on a different subdomain), I only see one request, being the POST or GET I'm testing. Both return me the expected results, but I still get the No 'Access-Control-Allow-Origin' header is present on the requested resource., presumably because there was no OPTIONS request?
Do I not understand CORS well enough? Is this expected? Do I not understand Lumen? I have no idea where I've gone wrong with this one.

You will need to intercept the OPTIONS request in Lumen and make sure it returns the cors headers. See https://gist.github.com/danharper/06d2386f0b826b669552 Also you can try and use Postman (a nice app for testing apis) to inspect if the headers were send correctly. https://www.getpostman.com/.The headers you are looking to add are
'Access-Control-Allow-Origin' '*';
'Access-Control-Allow-Headers' 'Content-Type';
Note the headers can also be added to your web server instead of your app but that's not always a good idea.

Related

Laravel passport is working on localhost but not on heroku

I am working on an authentication (login & registration) application using java (android).
Now in order to communicate with a database I was requested to implement it using Laravel web app. I configured everything (Laravel passport) and tested it using postman.
I deployed the website on Heroku and configured pgsql with it. then I duplicated the request in postman and changed the URL.
the problem is that it is adding the new user in the database but it is returning 500 internal server error with no access token
postman response when adding the user:
the new user in the db:
the code responsible for adding users (same code is still working on localhost)
You probably have an error after creating the user. You receive a server-side 500 response because it is not sending you the correct headers to respond in json.
Some APIs require you to send particular headers along with requests, typically to provide additional metadata about the operation you are performing. You can set these up in the Headers tab. Enter any key-value pairs you need and Postman will send them along with your request. As you type, Postman will prompt you with common options you can use to autocomplete your setup, such as Accept
Make sure you are sending Accept: application/json and in your .env file this APP_DEBUG=true to see the error.

React proxy issue with the API server

I am a newbie with the react project deployment. The API server is the Laravel project and it's hosted on the Siteground.
I am sure the APIs works by Postman. And the react project runs on localhost:3000. In order to fetch some data with API, I have added the proxy: "http://api server domain" into the package.json.
It always says "Not allowed method" when I am going to fetch the data.
So I have hosted the API server on the localhost. In this case, I have added the proxy: "http://localhost:8000 into the package.json, it works perfectly.
How can I solve this issue?
It's seems like you're having a CORS (Cross-Origin Resource Sharing) problem.
According to MDN, CORS is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own.
An example of a cross-origin request: the front-end JavaScript code served from https://domain-a.com uses XMLHttpRequest to make a request for https://domain-b.com/data.json.
For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request resources from the same origin the application was loaded from, unless the response from other origins includes the right CORS headers.
More technical details HERE.
Solving:
You need to enable CORS on your API service.
If you don't have access to configure Apache, you can still send the header from a PHP script. It's a case of adding the following to your PHP scripts:
<?php header("Access-Control-Allow-Origin: *");
The following link shows how to: How to enable CORS on PHP
Since you're using Laravel, using a middleware may be a good way to solve your CORS situation.
CORS Middleware for Laravel should help you.

No 'Access-Control-Allow-Origin' header error in ionic 3

hey im new to ionic 3 i prepared a form of contact for my application where the server (php) has to send an email after the filling of the form by the user .
in the server i use the function mail to send email by the server it works find and it sends email even with the appearence of error of No 'Access-Control-Allow-Origin' header
I already added the two headers in my php scripts
header("Access-Control-Allow-Origin: *");
header('Content-Type: text/html; charset=utf-8');
This is not a problem of your ionic app. The server you try to access via api call doens't support CORS. Hopefully this article helps you to solve your problem.
https://blog.ionicframework.com/handling-cors-issues-in-ionic/
There is a tutorial or solution to solve your problem.
Here is the important part for you
Dealing with CORS in Ionic
CORS is only an issue when we are running or testing our app when running ionic serve or ionic run -l.
There are two ways to solve the issue: The first, and easier, solution
is to just allow all origins from your API endpoint. However, we can’t
always control the endpoint we are accessing. What we need, then, is a
request that does not specify an origin.
We can do this by using a proxy server. Let’s look how the Ionic CLI
provides an easily configurable proxy server.

Enable WooCommerce on http

Iam working cart apllication. I installed WooCommerce plugin and generated keys in http server. But it is not returning any products data. Is WooCommerce works in HTTP or it works only in https?
The API works on both http and https protocols. For http you'll have to encode your requests and for https since its already encoded, you just pass the key and secret as parameters. Its best if you first test the response in POSTMAN. I'm attaching screenshot of a successful get response on HTTP.
As you see, you need a Signature method, timestamp and nonce. Every server side language will have different implementations. So read the documentation and try out the examples.
Its a lot simpler for https, and I highly recommend installing an SSL certificate before going into production.

Laravel 4 Auth With Token

I asked a question the right way to structure a project with Laravel 4. I currently am making an API (to support a mobile app) and a web app to serve as the backend.
1) What would be the best practice for this? Two installations (the web app would get data via the api (what I have done)? Using one Laravel installation with namespaces? One Laravel installation with folders?
2) I have make a custom auth driver for Laravel and got it working. In the return on login I return an API token which I need for subsequent calls. I understand that in Laravel, only the ID of the user is saved, how would I make the api token saved at well when Auth::check() passes? Some of this stuff is making me question if it is bad to use Laravel in this decoupled from the db setting because it makes Eloquent not an option.
I have 2 separate installations - one for API and one for web (which uses this API).
Don't bother with additional cost of +-50MB of another installation - separate them!
AUTH
On each request I set 'Access-Token' header on client side. This token is read then on API side with Header::get('Access-Token'). Then I store authenticated user just for this one and only request - API should be stateless (no user data in session, require auth on each request).
Among other things I also check Accept and Content-Type headers - my API only accept application/json and sports responses in application/json format as well.

Categories