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.
Related
We use cloudflare access to make web applications on the local server available to external users.
In that case, http requests from the external api will pass through the cloudflare proxy once, but will they be blocked at that time?
I would like to use the switchbot api's webhook, but I am not receiving any notification. I would like to make this happen.
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.
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.
I wrote PHP code that allows me to communicate with a REST API.
My PHP call issues a cURL call to communicate with the API service. However, I am running into a weird issue where the data that is being received by the API is not what is being sent using cURL.
I would like to setup some type of a middle man to ensure that the request that I send to from Apache is the same data that is received by the API.
The information that I am interested to see is
Request/Received Header
Request/Received Body
I am thinking about ruining Wireshark on the Apache server to capture the packets that are going from my Apache to the API and also everything that is being received from the API to Apache.
After installing Wireshark on the Apache server "a Windows 7 machine" I see a lot of data.
How can I tell Wireshark to only capture the data from Apache to the API and from the API to Apache only?
Thank you for your help.
There are many tools for API tsting, starting from very easy to use browser plugins and finishing with someting quite complicated as Apache Jmeter. The idea is to make the calls from your testing software to the API and analyse the request and response. if you are on windows you can use something like Fiddler to intercept the packages that are going out from your machine. If you have access to client server I assume there are tools for various OS to intercept the outgoing packages and analyse them, but you would have to google for those.
to filter HTTP results in Wireshark, just type http in the filter field and click Apply
to have a better look, just start th capture before the HTTP request and stop it juste after
afterward, if you know the IP of the API server, you can filter a step more with :
http && ip.dst == X.X.X.X
I have an endpoint which generates serversent events and I used to read it in my client. But recently they enforced the same-origin policy and I get the error No 'Access-Control-Allow-Origin' header is present on the requested resource.
Is there a way to read these server sent events in a php proxy and echo it in my own event service stream?
Can you change the endpoint? To make it generate the required header?
header('Access-Control-Allow-Origin: *');
Alternatively a "php proxy" could work, you can use CURL to load the remote data, then echo it back out adding the header as above.
Be aware that allowing all origins isn't a good idea, and you should instead send a list of trusted domains.