John Kwong's Tech Notes Sharing my thoughts about tech and art.

Testing API Requests With XHR

It is easy to test api service with XHR. Just open Chrome Console and enter XHR syntax to test it. Sending HTTP GET request

var request = new XMLHttpRequest();
var url = 'https://abc.com/api/v1/product/' + id ;
request.open('GET', url, true);
request.send();

Sending HTTP POST request

POST Method
var request = new XMLHttpRequest();
var url = 'https://abc.com/api/v1/product/' ;
request.open("POST", url);
request.send();

Sending HTTP GET request with Header

var request = new XMLHttpRequest();
var url = 'https://abc.com/api/v1/product/' + id ;
request.open('GET', url, true);
request.setRequestHeader("Authorization", "Bearer " + access_token);
request.send();

Sending HTTP POST request with Header

var request = new XMLHttpRequest();
var url = 'https://abc.com/api/v1/product/' ;
request.open("POST", url);
request.setRequestHeader("Content-Type", "application/json");
request.send();

Port Forwarding in Windows

Start the command prompt as an administrator and perform the following command:

netsh interface portproxy add v4tov4 listenaddress=localaddress listenport=localport connectaddress=destaddress connectport=destport

List all current forwarding rules:

netsh interface portproxy show all

To clear all current forwarding rules:

netsh interface portproxy reset

Troubleshooting CORS Issues On Apache

Sometime I got this errors from Chrome browser. This is a cross-domain issue. To solve this , we need to edit .htaccess file.

Failed to load https://example.com: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://abc.com’ is therefore not allowed access.

To accept requests from the http://abc.com

<ifModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://abc.com"
</ifModule>

Or accept any kind of domain, we could use the “*”

<ifModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</ifModule>

Then, we may got the next error:
XMLHttpRequest cannot load http://abc.com. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

We need to indicate which headers are safe for http://abc.com. So we need to edit the .htaccess file like:

<ifModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
</ifModule>

If it is still not work, you should make sure mod_headers and mod_rewrite is enabled.

apache2ctl -M

If you do not see rewrite_module, you need to enter below command to enable it.

sudo a2enmod rewrite & sudo service apache2 restart

If you do not see headers_module, you need to enter below command to enable it.

sudo a2enmod headers & sudo service apache2 restart

Hello World

This is my first post. I would like to share what i know with you!