TP5.1+Vue前后端分离实践
配置:
主域名 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');
- 项目最终目录结构为
![在这里插入图片描述](https://img-blog.csdnimg.cn/20181219173558307.png)
- 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;
}
服务器最终的目录结构为
来源:https://segmentfault.com/a/1190000016236681
TP5.1+Vue前后端分离实践的更多相关文章
- 基于 koajs 的前后端分离实践
一.什么是前后端分离? 前后端分离的概念和优势在这里不再赘述,有兴趣的同学可以看各个前辈们一系列总结和讨论: 系列文章:前后端分离的思考与实践(1-6) slider: 淘宝前后端分离实践 知乎提问: ...
- 解决Django+Vue前后端分离的跨域问题及关闭csrf验证
前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道 在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...
- Flask + vue 前后端分离的 二手书App
一个Flask + vue 前后端分离的 二手书App 效果展示: https://blog.csdn.net/qq_42239520/article/details/88534955 所用技术清单 ...
- 喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
- 两个开源的 Spring Boot + Vue 前后端分离项目
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
- beego-vue URL重定向(beego和vue前后端分离开发,beego承载vue前端分离页面部署)
具体过程就不说,是搞这个的自然会动,只把关键代码贴出来. beego和vue前后端分离开发,beego承载vue前端分离页面部署 // landv.cnblogs.com //没有授权转载我的内容,再 ...
- SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题
原文链接:https://segmentfault.com/a/1190000012879279 当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理 ...
- Springboot+vue前后端分离项目,poi导出excel提供用户下载的解决方案
因为我们做的是前后端分离项目 无法采用response.write直接将文件流写出 我们采用阿里云oss 进行保存 再返回的结果对象里面保存我们的文件地址 废话不多说,上代码 Springboot 第 ...
- @vue/cli 4.0+express 前后端分离实践
之前总结过一篇vue-cli 2.x+express+json-server实现前后端分离的帖子,@vue/cli3.0及4.0搭建的项目与vue-cli2.x的项目结构有很大的不同.这里对@vue/ ...
随机推荐
- python如何导入自定义文件和模块$PYTHONHOME$\Lib\site-packages 方法
python 中如何引用自己创建的源文件(*.py)呢? 也就是所谓的模块. 假如,你有一个自定义的源文件,文件名:saySomething.py .里面有个函数,函数名:sayHello.如下图: ...
- 【leetcode】1108. Defanging an IP Address
题目如下: Given a valid (IPv4) IP address, return a defanged version of that IP address. A defanged IP a ...
- vue props父组件与子组件传值方法
/~~父组件 runshow.vue~~/ <template> <div> <conditions :fenxiConditonsList="propCond ...
- 多数据源(sql server 2008,二个数据库不ip,)
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- NPM错误
有时突然报下面错误: 本人经验是IP变了...
- CF G. Orientation of Edges BFS
来两遍 $BFS,$ 都贪心一下即可. #include <bits/stdc++.h> #define maxn 300009 using namespace std; void set ...
- php服务器环境安装及项目搭建
2安装运行环境及搭建项目2.1安装apache及测试1)安装apacheyum install httpd 启动apache systemctl start httpd.service 查看运行状态 ...
- 顶级域名、一级域名、二级域名与IP
转自:https://blog.csdn.net/qq_38071429/article/details/80339091 域名:可分三级,一级域名,二级域名,三级域名.是由一串字符+域名后缀组成,我 ...
- MySQL删除外键约束问题
当我们在一个表中添加字段约束的时候: ALTER TABLE product ADD CONSTRAINT product_fk FOREIGN KEY(category_id) REFERENCES ...
- ScheduledThreadPoolExecutor 源码分析
ScheduledThreadPoolExecutor ScheduledThreadPoolExecutor 是能够在给定的延时之后.或周期性执行被提交任务的线程池 创建实例 /** * 线程池关闭 ...