前台代码与后台代码分离

1. 后台代码删除static目录

在这里插入图片描述

2. 将static部署到nginx服务器上

  • 将static存放到一个路径下 随便存放 只要你找得着
    在这里插入图片描述

  • 打开nginx目录 找到config 文件 编辑
    在这里插入图片描述

  • 插入代码 将你的文件夹路径写上 让nginx代理静态资源 记得保存

	# windows文件服务器配置
    # 搭建前后端分离页面服务器
	server {
			listen       8094;
			server_name localhost;

			charset utf-8;

			#浏览器打开路径:localhost:8094(listen端口)/location设置的路径/文件.后缀
			location ~ /.*\.(html|htm|js|css)$ {
			#文件/图片保存在电脑的地址
			root D:\\vue\\vue01;
			}
	}
		

在这里插入图片描述

  • 启动nginx
    直接点击Nginx目录下的nginx.exe 或者 cmd运行start nginx

其他命令

  • 关闭 nginx -s stop 或者 nginx -s quit
    stop表示立即停止nginx,不保存相关信息
    quit表示正常退出nginx,并保存相关信息

  • 重启(因为改变了配置,需要重启)
    nginx -s reload
    在这里插入图片描述
    注:有时候cmd运行成功,但是电脑并没有开启nginx 要看任务管理器 有绿色图标即为启动成功
    在这里插入图片描述

  • 完成配置后就可以访问静态资源 因为资源在后台 vue axios 访问 涉及跨域问题
    在这里插入图片描述

  • vue axios需要访问后台服务器 这里涉及到跨域问题 nginx为前台解决跨域问题的第一步 文末解释跨域

  • 给后台配置一个CORS 可解决后台跨域访问问题 粘贴代码即可
    在这里插入图片描述


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("http://localhost:8094");
        //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);
    }
}

3.前后端都解决了跨域问题 启动后台服务器 就可以访问了

注意:前台vue axios路径写法,一定要注明访问的服务器地址,这样后台cors才可以拦截
在这里插入图片描述
效果图
在这里插入图片描述

4.跨域问题

4.1什么是跨域

跨域是指跨域名的访问,以下情况都属于跨域:

跨域原因说明示例
域名不同www.jd.comwww.taobao.com
域名相同,端口不同www.jd.com:8080www.jd.com:8081
二级域名不同/子域名不同item.jd.commiaosha.jd.com
协议不同http://jd.comhttps://jd.com
域名和ip地址http://jd.com192.168.23.12

如果域名和端口都相同,但是请求路径不同,不属于跨域,如:

www.jd.com/item

www.jd.com/goods

而我们刚才是从file:///D:/VueWorkspace/102/goods00/Goods.html去访问http://localhost:8090/,这属于域名不同,跨域了。

4.2为什么有跨域问题?

1 浏览器的同源策略引起跨域问题

2 跨域不一定会有跨域问题。

答:a.跨域没有引起问题:<script src=""> <img src="">
b.跨域引起了问题
因为跨域问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是于当前页同 域名的路径,这能有效的阻止跨站攻击。

因此:跨域问题 是针对ajax的一种限制

但是这却给我们的开发带来了不便,而且在实际生成环境中,肯定会有很多台服务器之间交互,地址和端口都可能不同,怎么办?

4.3解决跨域问题的方案

目前比较常用的跨域解决方案有3种:

  • Jsonp

    最早的解决方案,利用script标签(不受限)可以跨域的原理实现。

    限制:

    • 需要服务的支持
    • 只能发起GET请求
  • nginx反向代理

    思路是:利用nginx反向代理把跨域为不跨域,支持各种请求方式

  • CORS 原理参考百度

    规范化的跨域请求解决方案,安全可靠。是w3c阻止的标准

    优势:

    • 在服务端进行控制是否允许跨域,可自定义规则
    • 支持各种请求方式:get、post、put、delete
    • 限制访问的电脑的IP地址

    缺点:

    • 会产生额外的请求(可能发一次/二次请求)

本文这里采用nginx搭建静态页面服务器+cors的跨域方案。
祝你幸福
送你一首歌《Breathless》 Shayne Ward
附图:武大情书大赛参赛作品
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐