前后端分离(配置步骤)

最新推荐文章于 2025-07-26 04:07:56 发布

可爱的的编辑人员

最新推荐文章于 2025-07-26 04:07:56 发布

阅读量1.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：配置

本文链接：https://blog.youkuaiyun.com/qq_42607692/article/details/88710006

配置专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个前后端分离项目的实现过程，前端采用Vue进行开发，并通过VisualStudioCode进行管理。后端则利用SpringCloud、ssm及SpringBoot进行构建。文章详细展示了如何在nginx中配置前端静态资源的访问路径，以及如何在前端js文件中处理跨域问题。

前后端分离(前端使用Vue,后端使用SpringCloud+ssm+maven+SpringBoot配置步骤)

前台页面放在Visual Studio Code中
在nginx中配置：

搭建前后端分离页面服务器

在这里插入图片描述
代码展示：
server {
listen 8081;
server_name localhost;
charset utf-8;

#浏览器打开路径：localhost:8081(listen端口）/location设置的路径/文件.后缀
location ~ /.*.(html|htm|js|css|jpg|png|gif|ttf|woff|)$ {
#文件/图片保存在电脑的地址
root E:\ForeCode\heluo;
}
}

在js文件中添加 api.js 文件,该文件包含ajax跨域的解决方法

代码展示：
/** axios：ajax请求 **/
axios.defaults.baseURL = ‘http://localhost:9091/v1’
// 设置AJAX超时时间
axios.defaults.timeout = 3000
// 设置提交数据时的格式
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’
// request请求拦截器
axios.interceptors.request.use(function (config) {
// 判断如果用户登录了就把 token 配置到 axios 的协议头中
let token = localStorage.getItem(‘token’)
if (token) {
config.headers[‘authorization’] = token
}
// 处理请求前代码
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
在配置访问方法路径时要记得指定分布式系统的名称，例如："/web-service"等