前后端分离项目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 {
    @Bean
    public 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

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