TP5.1+Vue前後端分離實踐
阿新 • • 發佈:2018-12-20
配置:
主域名 www.demo.xyz
二級子域名 api.demo.xyz
- 列表專案其中api.demo.xyz加入了版本控制,使用的是URL路由傳入方式
在route.php路由檔案中配置,如下
return [ // api版本路由 ':version/:controller' => ':version.:controller',// 省略方法名時 ':version/:controller/:function' => ':version.:controller/:function'// 有方法名時 ];
//同時控制器里加入版本號
namespace app\api\controller\v1;
class User
{
public function login()
{
$data = ['name'=>'Paul','age'=>19];
return json($data);
}
}
//這個例子最終的url顯示為http://api.demo.xyz/v1/user
Route::get(':version/user', 'api/:version.user/login');
- 專案最終目錄結構為
- nginx配置
# 主域名配置 server { listen 80; server_name demo.xyz www.demo.xyz; root /www/www.demo.xyz/dist; #charset koi8-r; #access_log logs/host.access.log main; location / { index index.html index.htm index.php; } # 此處可作反向代理 #location /v1 { # proxy_pass http://api.demo.xyz; #} #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # location ~ \.php$ { root /www/www.demo.xyz; fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} }
# 二級介面子域名配置
server {
listen 80;
server_name api.demo.xyz;
root /www/api.demo.xyz/public;
#charset koi8-r;
配置cors解決跨域問題
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
return 204;
}
#access_log logs/host.access.log main;
location / {
index index.html index.php;
if (!-e $request_filename) {
rewrite ^(.*)$ /index.php?s=/$1 last;
}
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
location ~ \.php$ {
root /www/api.demo.xyz/public;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
關於nginx配置cors需要說明的一些問題
1.按照CORS on Nginx來配置結果不生效
#
# Wide-open CORS config for nginx
#
location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
}
2.按照Using CORS來配置成功解決了跨域問題
# 其實就是將下面這段配置放到location塊外面
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
return 204;
}
伺服器最終的目錄結構為