Kinh nghiệm deploy server tránh lỗi Cross-Origin

Bài viết này dùng cho triển khai server ubuntu với frontend là vuejs, api sử dụng framework, chạy trên môi trường apache2

Cách thức cấu hình:

Bên frontend:

Giả sử tên miền là: vuejs.com

Cài đặt cấu hình để nhận dữ liệu từ api

Ở folder chứa html, cần tạo ra 1 file .htaccess

RewriteEngine On 
RewriteCond %{HTTPS} off 
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] 
RewriteBase / RewriteRule ^index.html$ - [L] 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule . /index.html [L]

Trường hợp tên miền https setup redirect không thông qua server đang chạy:

RewriteEngine On 
RewriteBase / RewriteRule ^index.html$ - [L] 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule . /index.html [L]

Bên api:

Giả sử tên miền là: api.com

Cấu hình virtual host vuejs:

<VirtualHost *:80>
    ServerName vuejs.com
    DocumentRoot "/path/vuejs"
    <Directory "/path/vuejs">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

Cấu hình virtual host api (trường hợp là chạy trực tiếp ví dụ như laravel, cần cài trực tiếp cors trong laravel)

<VirtualHost *:80>
    ServerName api.com
    DocumentRoot "/path/api"
    <Directory "/path/api">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

</VirtualHost>

Cấu hình host api (trường hợp dùng proxy server) (ví dụ port 3000 chuyển sang apache2) (cần cài mod_header, mod_proxy):

<VirtualHost *:80>
    ServerName api.com

    ProxyRequests Off
    ProxyPreserveHost On
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/


    Header set Access-Control-Allow-Origin "https://vuejs.com"
    Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type, Authorization"
    Header set Access-Control-Allow-Credentials "true"

</VirtualHost>