Recent Posts

How to Build Local Server 2 -Change Root Directory-

GOAL

To change settings of Apache and use your local directory as root directory.

Before changing settings of Apache, install and setup Apache. Refer to “How to Build Local Server 1” for more about installation procedure.

Environment

Windows 10
Apache 2.4.43

Change local server root

1. Set DocumentRoot in httpd.conf.

I created new directory “root” in Apache24 and set it as DocumentRoot.

# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
#DocumentRoot "${SRVROOT}/htdocs"
DocumentRoot "${SRVROOT}/root"

2. Confirm the result

Change Directives

Open httpd.conf. and change <Directory> Directive.

<Directory "${SRVROOT}/loot">
	Options Indexes FollowSymLinks
	AllowOverride None
	Require all granted
</Directory>

<Directory> Directive can control  group of directives.

Directives detail

Options: The Options directive controls which server features are available.
Indexes: If a URL which maps to a directory is requested and there is no DirectoryIndex (e.g., index.html) in that directory, then mod_autoindex will return a formatted listing of the directory.
FollowSymLinks: The server will follow symbolic links in this directory. This is the default setting.
You can see more of Options directive in Options Directive.

AllowOverride: When this directive is set to None, .htaccess files are completely ignored. .htaccess file is the configurations file for non-administrator users.
You can see more of Options directive in AllowOverride Directive.

Require: This directive tests whether an authenticated user is authorized according to a particular authorization provider and the specified restrictions.
all granted: Grant access to all requests.
You can see more of Options directive in Require Directives.

Confirm results

Put index,html and resources into root directory. Access localhost with any browser you like.

How to Build Local Server 1 -Install and Setup Apache-

GOAL

To setup Apache and build local web server with it. In this article, you can only display default page. If you would like to create new directory as a local serer, check “How to Build Local Server 2” after Apache setup.

Environment

Windows 10
Apache 2.4.43

What is Apache?

Apache is open source application for implementation of an HTTP (Web) server. You can build local web server and global web server regardless of whether it is commercial use or not.

Why is the local web server necessary? 

Local web server is used as a virtual environment for development and test before publishing to the live server. You can make local file a test server that only local users can access.

Installation and setup of Apache

Installation

1. Open Download page “Apache HTTP Server project website“.

2. Click Files for Microsoft Windows if you use windows.
* Click “Binaries” if you don’t use windows.
* I don’t know why but I couldn’t click “Source: httpd-2.4.43.tar.bz2”.

3. Select one sit from the list. In my case, I clicked “Apache Lounge”.

4. Install Apache 2.4.43 Win64 or Apache 2.4.43 Win32

Setup

1. Unzip httpd-2.4.43-win64-VS16.zip and open it. You can see the directory named “Apache**”.

2. Put the directory “Apache24” into the directory you want. I put it on document directory.

3. Open Apache24>conf>httpd.conf with your favorite text editor.

Change definition of SRVROOT into the path to “Apache24”

#default
#Define SRVROOT "c:/Apache24"
Define SRVROOT "C:\Users\USER_NAME\Documents\Apache24\conf"

ServerRoot "${SRVROOT}"

Change ServerName

# If your host doesn't have a registered DNS name, enter its IP address here.
#
#ServerName www.example.com:80
ServerName localhost:80

Start Apache

Use command as below or just double-click httpd.exe.

Open command prompt and change directory into the Apache24¥bin

> cd C:\Users\USER_NAME\Documents\Apache24\bin
> httpd
AH00558: httpd: Could not reliably determine the server's fully qualified domain name, using ******. Set the 'ServerName' directive globally to suppress this message

If you got an warning about fire wall, allow the access in private network.

Access localhost

How to run httpd in the background?

You should register httpd as a windows service. Open command prompt as administrator and install httpd.

> cd C:\Users\USER_NAME\Documents\Apache24\bin
>  httpd -k install
Installing the 'Apache2.4' service
The 'Apache2.4' service is successfully installed.
Testing httpd.conf....

Then you can start httpd by command as below.

httpd -k start

You can stop/shutdown by commands as below. It works only when command prompt is run by an user as administrator.

> httpd -k stop
> httpd -k shutdown

Change contents

Put index.html and resources into Apache24\htdocs. I put index.html below.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>My page</title>
  <meta name="description" content="The HTML5 Herald">
  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>

<body>
  <h1>My Page</h1>
  <p>this is test page!</p>
</body>
</html>

Next Step

Change root directory from Apache24\htdocs into your local directory. Check How to Build Local Server 2 -Change Root Directory- for details.

What is Cross-Origin Resource Sharing (CORS)

GOAL

To understand Cross-Origin Resource Sharing (CORS) and how to avoid error regarding it.

Reference

Cross-Origin Resource Sharing (CORS)

Cross-Origin Resource Sharing (CORS)

Cross-Origin Resource Sharing is sharing resources from a different origin by using additional HTTP headers to allow a web application to access to that resources.

What is origin?

Origin is the currency to decide resource sharing and isolating.
Usually actors in the Web platform that share the same origin trust each other and have the same authority.

Origin is defined by the scheme, host and port of the URL of the resource. Scheme is client server protocol, http or https.

They are examples of same-origin and different-origin.

What is origin for?

When a browser need to get resource from a server, the browser should check whether the server is different from the one where index.html is. That’s because access to the cross-origin server can causes cross-site printing. The rule is called cross-origin policy.

Mechanism of CORS

Client (Web browser) adds “Origin” to HTTP Request header. If the origin is included in Access-Control-Allow-Origin of HTTP Response header, data can be transmitted.

You can see more about HTTP request/response more in “What is http request/response.”

Preflighted requests

There are 3 types of Cross-Origin Request.

1 Simple requests

In cross-origin resource sharing, browser uses the HTTP OPTION request method to preflight the request. Preflighting is to check if a request is accepted to the server before sending it.

However, simple requests that meet some conditions don’t trigger preflight. There are multiple conditions, and you can see them from the link below.

“Simple requests” from https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

2 Preflighted requests

If the request from browser is not simple request, browser first send an HTTP request by the OPTIONS method. Then server responses to preflight request. After preflight request is complete, the real request is sent:

The value of Origin in request should be contained in Access-Control-Allow-Origin in response.
The value of Access-Control-Request-Method should be contained in Access-Control-Allow-Methods in response
The values of Access-Control-Request-Headers should be contained in Access-Control-Allow-Headers in response.

3 Requests with credentials

Browser can send request that are aware of HTTP cookies and HTTP Authentication information.
If web application needs a resource on cross-origin server which sets Cookies, browser send GET request with Origin and Cookie header. Then server send response with Access-Control-Allow-Origin, Access-Control-Allow-Credentials(true) and Set-Cookie header.

The origin of Access-Control-Allow-Origin should be the same one as the value of Origin in the request header.

Problems with CORS

You can see some errors and solutions in “CORS errors” from Web technology for developers document.

Problem with WebGL texturing

In my case, the error below occurred in WebGL texture call.

Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loaded.

How to solve this problem

If it works on the server, you should add crossOrigin to image.

 image.src = url;
 image.crossOrigin = origin; 
#origin is the domain where the image exists

If it works on local development environment (directory on your HDD), you should set up a server.

Use php or python command

Open terminal and input command.

1. python

cd <path to the directory where index.html and resource exists>
python -m SimpleHTTPServer 8080

2. php

cd <path to the directory where index.html and resource exists>
php -S localhost:8080

Use XAMPP

XAMPP is a free and open-source cross-platform web server solution package.

Categories

AfterEffects Algorithm Artificial Intelligence Blender C++ Computer Graphics Computer Science Daily Life DataAnalytics Event Game ImageProcessing JavaScript Kotlin mathematics Maya PHP Python SoftwareEngineering Tips Today's paper Tools TroubleShooting Unity Visual Sudio Web Windows WordPress 未分類