前后端分离项目nginx搭建静态页面服务器cors做后台跨域接收前台请求

自己在闲暇时间里，无聊的我试着做了一个前后台分离的入门demo。在编写代码前通过查询百度，csdn，博学谷等做了一些准备工作，具体还只是做到前台发送的请求能顺利的发送到后端，时间仓促做的也有不足之处，还请各位大佬多多指导，评论，勿喷。

（我选的项目是我自己随便在网上选的网站http://www.boohee.com/，我爬取了她的一些页面，js自己写）

---- nginx 操作命令

start nginx 启动nginx
tasklist /fi "imagename eq nginx.exe" 查看nginx进程
nginx -s quit 安全关闭
nginx -s stop 强制关闭
nginx -s reload 改变配置文件时，重启nginx工作进程，使配置生效
nginx -s reopen 打开日志文件
nginx -v 查看版本
nginx -h 查看帮助信息

1.nginx搭建静态页面服务器

如果你有现成的前台（css，js，html。。。）你完全可以在linux上部署项目，我这先以win7上搭建开始说明等下一篇博客我会再来说一些我是如何在linux上用nginx搭建静态页面服务器和部署后台项目的

win7在官网下载nginx并安装配置环境

官网下载链接：http://nginx.org/en/download.html

下载好后解压缩到非中文路径下:

通常你的项目不会放在ngix解压的html目录里而要让nginx能找到你的项目必须配置nginx的系统变量（注意:配置了系统变量后再非解压命令下执行start nginx 可能不会启动nginx的，你可以到解压目录下启动）

我这以：E:\my_space_2.16\nginx\nginx-1.14.2举例

E:\my_space_2.16\nginx\nginx-1.14.2

随便在哪个目录下打开黑窗口（命令提示符）

shift+鼠标右键

或者win+R 输入cmd

测试nginx配置成功

输入命令：nginx -v

到此nginx也已在win7上安装配置成功了接下来使用nginx来代理我们的前台使我们在浏览器上可以访问

进入nginx解压根目录的conf目录找到nginx.cof文件

以下是我的nginx.cof内容

#user nobody;
worker_processes 1;

#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;

#pid logs/nginx.pid;

events {
worker_connections 1024;
}

http {
include mime.types;
default_type application/octet-stream;

#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';

#access_log logs/access.log main;

sendfile on;
#tcp_nopush on;

#keepalive_timeout 0;
keepalive_timeout 65;

#gzip on;

server {
listen 80;
server_name localhost;

location / {
root html;
index index.html index.htm;
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

#image server
server {

listen 8094;

   server_name localhost;

   charset utf-8;

   location ~ /.*\.(gif|jpg|jpeg|png)$ {

       root C:/woke/image;
   }
}
   server {
listen 8099;
server_name localhost;
       ssi on;
       ssi_silent_errors on;
       ssi_types text/shtml;

charset utf-8;

location ~ /.*\.(html|htm|css|js|gif|jpg|jpeg|png)$ {

       root E:/my_space_2.16/html/loseweight_html;
   }
}
}
我只拿出本次前台项目代理sever进行说明

进入nginx安装目录点击nginx.exe,或者在其打开黑窗口输入启动命令:start nginx

谷歌浏览器访问nginx代理后的项目

2.前台请求跨域cors后端处理

前台发送请求：因为js是我写的，我用到的前端知识主要有这些vue+element-ui+axios+Mock.js

axios可以配合vue发送ajax请求蛮好用的后面我会把我的项目放到码云上有想下载的可以去找找这个js

不说了还是继续说一下我是怎么用axios发送请求到后端并用cors处理后端跨域的

自定义一个api.js 这里主要存放要发送到后端的请求

/** axios:发送ajax 的代码
* 支持浏览器和node.js

支持promise

能拦截请求和响应

能转换请求和响应数据

能取消请求

自动转换json数据

浏览器端支持防止CSRF（跨站请求伪造）
*/
//axios 前置拦截器把token 设置在请求头中发送到服务器
axios.defaults.baseURL='http://localhost:8087/loseweight_fore';
//设置ajax 超时时间
axios.defaults.timeout=3000;
//设置提交数据时的格式
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios.interceptors.request.use(function(config){
// 判断如果用户登录了就把token 配置上 axios 的协议头中
let token = localStorage.getItem("token");
if(token != null){
config.headers['token'] = token
}
//处理请求代码
return config;
},function(){
//Do something with request error
return Promise.reject(error);
});

//登录表单提交
function login(params){
return axios.post("/user/login",params);
}
//注册表单提交
function register(params){
return axios.post("/user/register",params);
}
//退出登录
function loginOut(){
return axios.get("/user/loginOut");
}
//登录判断
function toLogin(){
return axios.get("/user/toLogin");
}

。。。。。。

我后台的框架是SpringBoot+SpringMvc+Mybait 做的cors无须再引入依赖

自定义GlobalCorsConfig 文件复制粘贴即可

package com.xiaozheng.loseweight.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class GlobalCorsConfig {@Beanpublic CorsFilter corsFilter() {//1.添加CORS配置信息CorsConfiguration config = new CorsConfiguration();//1) 允许的域,不要写*，否则cookie就无法使用了config.addAllowedOrigin("*");//2) 是否发送Cookie信息config.setAllowCredentials(true);//3) 允许的请求方式config.addAllowedMethod("OPTIONS");config.addAllowedMethod("HEAD");config.addAllowedMethod("GET");config.addAllowedMethod("PUT");config.addAllowedMethod("POST");config.addAllowedMethod("DELETE");config.addAllowedMethod("PATCH");// 4）允许的头信息config.addAllowedHeader("*");//2.添加映射路径，我们拦截一切请求UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();configSource.registerCorsConfiguration("/**", config);//3.返回新的CorsFilter.return new CorsFilter(configSource);}
}

如此启动项目整个前后台分离环境就完美搭建好了以后就直接写代码就行了

项目前台码云地址：https://gitee.com/xiaoZhengJC/loseweight_html.git

项目后台码云地址：https://gitee.com/xiaoZhengJC/loseweight_parent.git

欢迎大佬在评论区留言，多多指导后进末学

前后端分离项目nginx搭建静态页面服务器cors做后台跨域接收前台请求相关推荐

前后端分离项目Nginx部署
前后端分离项目Nginx部署更多详细内容请前往我的个人博客一.在Linux先安装好Java和Nginx 1.安装Java 下载好Java安装包,解压 [root@jiang java]# ll t ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[前端篇] 后端篇前端篇创建vue项目安装所需工具开始编码 1.在根目录下添加vue.config.js文件 2.编写main.js 3.编写App.vue 4.编写ax ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【后端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[后端篇] 数据库准备后端搭建 1.快速创建个SpringBoot项目 2.引入依赖 3.编写代码快速生成代码 4.运行代码生成器生成代码 5.编写application.pr ...
SpringBoot+Vue前后端分离项目的搭建及简单开发（这次保证看明白~）
文章目录概述一.搭建SpringBoot后端 1.sql脚本 2.新建SpringBoot项目 3.MP代码生成 4.编写Controller 二.搭建Vue前端 1.IDEA安装Vue.js插件 ...
前后端分离单点登录SSO实现方案淘宝、京东跨域获取Cookie、OAuth2、QQ客户端多种模式
演示Demo站点 http://sso.exrick.cn 开源版Github地址 https://github.com/Exrick/x-boot) 开发文档 https://www.kanclou ...
Springboot+Vue前后端分离项目打包并部署到服务器
一.打包前端项目打开前端项目,使用npm run build命令进行打包,打包成功后结果如下这时,该项目目录下有一个build目录是打包好的文件将该目录下的所有文件复制到后端Springboot ...
Django+vue+ElementUi 实现前后端分离项目
目录一. 环境搭建二. Django 2.1 创建项目 2.2 数据库配置 2.3 创建模型并且设计数据库表 Django app :myApp 2.4 创建新增和查询的接口三.Vue 3.1. ...
视频教程-Vue、Spring Boot开发小而完整的Web前后端分离项目实战-Java
Vue.Spring Boot开发小而完整的Web前后端分离项目实战 3年多.net开发经验:5年的java后端开发经验,熟悉行.net,java流行技术,拥有多个.net,java web企业级应; ...
最细致的Spring Boot结合Vue前后端分离项目打包部署步骤（搭配Nginx）
文章目录前言一.环境准备二.SpringBoot项目打jar包 1.1 使用Maven的package插件打包 1.2 上传至Linux服务器三.Vue项目打包 1.1 修改后台请求地址 1. ...

前后端分离项目nginx搭建静态页面服务器cors做后台跨域接收前台请求

前后端分离项目nginx搭建静态页面服务器cors做后台跨域接收前台请求相关推荐

最新文章

热门文章