ในการตั้งเว็บเซิฟเวอร์ เพื่อทำ API ปัญหาที่ต้องเจอ มีหลายเรื่อง แต่เรื่องที่พบเจอบ่อย และก็ลืมทุกที ว่าติดตรงไหน
ปัญหาใหญ่ที่สุด คือ
add_header 'Access-Control-Allow-Origin' '*' ;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Headers' 'Authorization...';
add_header 'Access-Control-Allow-Methods' '*';
และ
ทำยังไง เมื่อมี Request เข้ามา มันจะไปที่ App API ของเรา ในกรณีนี้ Request เข้ามาทางพอร์ต 80 ผมก็ proxy_pass ไปหา FastAPI ที่พอร์ต 8000 โดยมีเงื่อนไข ถ้า Endpoint มี "/api" ก็ให้ส่งต่อไปเลย
location /api {
# FastAPI เปิดพอร์ต 8000 http
proxy_pass http://localhost:8000;
# {DOMAIN}.conf
server {
listen 80;
listen [::]:80;
root /var/www/{DOMAIN}/html;
index index.html index.htm index.nginx-debian.html;
server_name {DOMAIN} {www.DOMAIN};
location / {
try_files $uri $uri/ /index.html;
}
location /api {
# FastAPI เปิดพอร์ต 8000 http
proxy_pass http://localhost:8000;
proxy_hide_header 'Access-Control-Allow-Origin';
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range' always;
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH' always;
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range' always;
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
}
}
server {
listen 443 ssl;
listen [::]:443 ssl http2;
root /var/www/{DOMAIN}/html;
index index.html index.htm index.nginx-debian.html;
server_name {DOMAIN} {www.DOMAIN};
ssl_stapling on;
ssl_certificate /etc/nginx/ssl/{DOMAIN}.crt; #ทำการโหลด ssl certificate และ ca root
ssl_certificate_key /etc/nginx/ssl/private.key; #ทำการโหลด private key
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
ssl_ciphers HIGH:!aNULL:!MD5;
location / {
try_files $uri $uri/ /index.html;
}
location /api {
# FastAPI เปิดพอร์ต 8000 https
proxy_pass https://localhost:8000;
proxy_hide_header 'Access-Control-Allow-Origin';
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range' always;
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH' always;
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '$http_origin' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range' always;
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
}
}
# แปลงเป็น https://www ถ้าใส่ชื่อโดเมนมาอย่างเดียว
server {
listen 80;
listen 443 ssl;
server_name "~^(?!www\.).*" ;
return 301 $scheme://www.$host$request_uri;
}
บรรทัดที่ 12 ทำไมไม่เขียน
try_files $uri $uri/ =404;
แก้ไขปัญหาของ Vue
กด Refresh หรือเข้าเว็บด้วย URL แล้วเพจตาย
location / {
try_files $uri $uri/ /index.html;
}
** ซึ่งก็จะมีปัญหากับ Google SEO อีกเพราะ ต้องการให้เป็น =404;