TP5.1+Vue前后端分离实践
Vue 实践 分离 前后
2023-09-11 14:16:54 时间
配置:
主域名 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;
}
服务器最终的目录结构为
相关文章
- [转] vue前端异常监控sentry实践
- 【Vue】你必须要知道的vue中v-on指令的修饰符
- Vue 组件之间传值
- 一篇文章带你了解axios网络交互-Vue
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- Web前端-Vue.js必备框架(一)
- vue插件
- Vue相关开源项目库汇总 http://www.opendigg.com/tags/front-vue
- VUE+servlet上传多文件实践
- 在vue.config.js中模拟后端接口数据
- vue初识
- vue 实现动态表单点击新增 增加一行输入框
- vue学习笔记十:Vue中引入jquery
- vue学习笔记八:Jquery VS Vue之全局属性对照
- Vue富文本编辑器的使用vue-quill-deitor
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
- [js高手之路] vue系列教程 - vue的基本用法与常见指令(1)
- 浅析Vue项目如何基于Vuex进行qiankun微前端应用间通信方案实践:子应用无vuex共用主应用store的方案(子应用里如何保证主应用store在子应用的响应式)、子应用有独立store与主应用store分离共存的方案
- Vue3实践指南:Prettier代码格式化工具、格式化Vue出现单引号变双引号及分号问题、useRouter执行后undefined问题、Property 'value' does not exist on type 'HTMLElement'、error Unexpected mutation of “xxxx“ prop
- Web 前端 之 Vue vue cli 环境的搭建简单整理(简单的一些注意事项)
- Vue学习第14天——vue自定义事件及详细代码演示
- Vue表单进阶操作
- Vue嵌套(多级)路由