六角體驗營
# Todolist RESTful API : 開發新刪修查的API (實作1) - 環境設置(postman)
> 複習筆記 : [node.js - Node.js 核心模組 : createServer](https://hackmd.io/udzaGxIhThqXOPoTOu15_Q?view)

<br>

## 1. 建立環境
* #### STEP 1-1. 產生package.json

    npm init

* #### STEP 1-2. 建立伺服器 createServer

> 筆記 : request 發出請求 / response 回應
> 可透過console.log(request)了解使用者資訊

* 專案中新增 server.js 檔案
* terminal 執行 node server.js 或 nodemon server.js
* 開啟 server (如下)

  const http = require('http'); //載入http模組
  
  //監聽函式
  const requestListener = (request,response)=>{
      
      //console.log(request); //可透過請求獲得使用者(發出請求)資訊
      //console.log(request.url);
      //console.log(request.method);
      
      response.writeHead(200,{"Content-Type":"text/plain"});  //回應格式
      response.write("hello"); //回應文字
      response.end();  //結束回應
  }
  
  const server = http.createServer(requestListener);

  server.listen(3005); //給port號

* #### STEP 1-3. 執行node server.js 開啟網址
* 執行結束後可在網址以localcast:port號檢視，應會呈現回應的hello文字

    127.0.0.1:3005
    localhost:3005


<br>

## 2. postman 發出請求(get / post)
* #### STEP 2-1. 觀察request資訊
request 是一個物件資料，內含使用者資訊

  const requestListener = (request,response)=>{
    
      //request 是一個物件資料，內含使用者資訊
    console.log(request);
      
      //觀察url及method資訊
    console.log(request.url);
    console.log(request.method);

    ...
  };

* #### STEP 2-2. 發送請求
* terminal執行node server.js / nodemon server.js
* postman 修改url網址、請求方法(下圖)


* #### STEP 2-3. termainal回應資料

  /hiii~
  POST

<br>

## 3. 新增首頁測試網址與 404 頁面
* #### STEP 3-1. 發送請求

const http = require('htpp');

const requestener = (request,response)=>{
    
    const headers = {"Content-Type":"text/plain"};
    
    //1. 當首頁的情況且網頁重整時(get方法使用)
    if(request.url == '/' && request.method == "GET"){
        response.writeHead(200,headers);
        response.write('index');
        response.end(); 
    
    //2. 使用其他方法的情況(ex.DELETE)  
    //   需要透過postman觀察
    }else if(request.url == '/' && request.method == "DELETE"){  
        response.writeHead(200,headers);
        response.write('Delete');
        response.end(); 
        
        
    //3. 找不到首頁時    
    }else{    
        response.writeHead(404,headers);
        response.write("not found 404");
        response.end();
    }
}

const server = http.createServer(requestListener);
server.listen(3005);

## 4. 調整表頭資訊，設置回傳 JSON 與 cors 資訊(跨網域)
* #### STEP 4-1. 表頭資訊

* Access-Control-Allow-Headers : 允許的客戶端（瀏覽器）請求中可以包含的 HTTP 請求表頭
* 'Content-Type'（內容類型）
* 'Authorization'（授權）
* 'Content-Length'（內容長度）
* 'X-Requested-With': 自定義的，用於指示請求是由 XMLHTTPRequest（XHR）對象發起的

* Access-Control-Allow-Origin : 其他伺服器IP均能造訪網站
* Access-Control-Allow-Methods : 跨網域可以使用的方法
* Content-Type : 回傳數據改為json格式資料

const headers = {
  'Access-Control-Allow-Headers': 'Content-Type, Authorization, Content-Length, X-Requested-With',
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'PATCH, POST, GET,OPTIONS,DELETE',
  'Content-Type': 'application/json'
}

* #### STEP 4-2. postman中測試headers是否成功引用
若有包含允許的headers資訊，代表成功


* #### STEP 4-3. 設定response回應的資料內容(轉換成JSON字串)
網路請求只能以字串傳送 -> 使用 **JSON.stringify()**

  //修改response.write內容
    if(request.url=='/' && request.method == "GET"){
        response.writeHead(200,headers);
        
        response.write(JSON.stringify({
            "status":"success",
            data:[],  //回傳空陣列
        }));
        
        response.end();
    
    //else if 可拿掉，僅為測試方法用

    }else{  
        response.writeHead(200,headers);
        
        response.write(JSON.stringify({
            "status":"false",
            "message":"無此網站路由"
        }));
        
        response.end();
    }

* #### STEP 4-4. 透過postman / 127.0.0.1:3005 測試
* 成功到達首頁

* 不存在的網址

<br>

## 5. preflight options API 預先檢查機制
> [MDN：跨來源資源共用（CORS）](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS)

* 可在DevTools network中觀察到跨域(cors)的瀏覽器請求，會被發送兩次(type: preflight / fetch)


* 原因是因跨網域(domain)的請求會較嚴謹
* ex.localhost向某API("https://.....")發送請求
* 第一次先發出網址請求 options
* 第二次才對 API 使用 method 發出請求


<br>

## 6. 設定 options API
* #### STEP 6-1. 加入OPTIONS的情況 -> 直接結束

  //修改response.write內容
    if(request.url=='/' && request.method == "GET"){
        response.writeHead(200,headers);
        
        response.write(JSON.stringify({
            "status":"success",
            data:[],  //回傳空陣列
        }));
        
        response.end();
    
    //options方法的情況
    }else if(request.method == "OPTIONS"){
        
        response.writeHead(200,headers); //數據傳遞OK
        response.end(); //送回去給伺服器

    }else{  
        response.writeHead(200,headers);
        
        response.write(JSON.stringify({
            "status":"false",
            "message":"無此網站路由"
        }));
        
        response.end();
    }

* #### STEP 6-2. postman 使用 options 方法測試
不會得到回呼，因為response.end();

<br>

> 接續 :
> [**Todolist RESTful API : 開發新刪修查的API (實作2) - CRUD ( GET / POST API )**](https://hackmd.io/fjk5zVcFRwaVnQND2iUNfQ?view)