5、基于Nginx解决跨域问题

5.1、什么是网站跨域问题

前端部署 html.mayikt.com /index.html

后端部署 api.mayikt.com/ 接口 java

浏览器访问：http://html.mayikt.com/user.html

页面里面 ajax 请求：http://api.mayikt.com/getUser

浏览器访问：127.0.0.1:80/user.html

页面里面 ajax 请求：127.0.0.1:81/getUser

浏览器访问：https://127.0.0.1:80/user.html

页面里面 ajax 请求：http://127.0.0.1:80/getUser

不会发生跨域的问题

浏览器访问：http://127.0.0.1:80/user.html

页面里面 ajax 请求：http://127.0.0.1:80/getUser

页面中请求的ajax地址如果与页面请求地址域名和端口、协议不同的话，浏览器采用安全策略，请求能够正常到达服务器端，但是无法获取响应结果。

跨域问题是浏览器的一种安全策略,访问需要遵循同源策略：

5.2、环境的准备

1.前端将静态资源放入： nginx html 目录中

user.html

2.后端接口

    @RequestMapping("/getUser")public Map getUser() {HashMap result = new HashMap<>();result.put("code", "200");result.put("msg", "ok");return result;}

3.nginx相关配置

	server {listen       80;server_name  html.mayikt.com;location / {root   html;index  index.html index.htm;}}	server {listen       80;server_name  api.mayikt.com;location / {proxy_pass   http://127.0.0.1:8080;index  index.html index.htm;}}	

4.访问user.html http://html.mayikt.com/user.html

5.3、解决方案

1.项目响应头设置允许跨域权限 response.setHeader("Access-Control-Allow-Origin", "*"); 适合于小公司

2.使用jsonp解决网站跨域问题 缺点：只能支持Get请求 模拟脚本提交。

3.使用Nginx搭建API网关保持域名和端口一致 Location

4.使用微服务中的网关

5.HttpClient实现转发 缺点：重复发送两次请求

解决跨域问题核心思想：

页面访问的地址与ajax请求 域名、端口 协议 需要一致。

在响应头中 响应 允许浏览器端跨域

resp.setHeader("Access-Control-Allow-Origin", "*");

java项目 aop 拦截器 过滤器 、网关、nginx中

@RequestMapping("/getUser")public Map getUser() {HttpServletResponse resp = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getResponse();resp.setHeader("Access-Control-Allow-Origin", "*");HashMap result = new HashMap<>();result.put("code", "200");result.put("msg", "ok");return result;}

nginx 解决跨域问题

使用Nginx搭建API网关保持域名和端口一致 Location

将user.html存放到 D:/mayikt/html

	server {listen       80;server_name  www.mayikt.com;location /html {root   D:/mayikt;index  index.html index.htm;}location /api {proxy_pass   http://127.0.0.1:8080/;index  index.html index.htm;}}	

http://www.mayikt.com/html/user.html

http://www.mayikt.com/api/getUser

6、动静分离

6.1、概念

动静就是将动态资源(jsp/ftl)与静态资源(img/css/js)分开,从而提高网站响应的速度；

我们可以使用nginx作为静态资源服务器。

6.2、动静分离与前后分离区别

前后分离 前端与后端 分开开发 例如 前端利用vue 开发项目 调用后端的接口（java）

动静分离 将静态资源资源（img/css/js）与动态资源（jsp/ftl）分开部署；

root 、alias指令区别

#若按照上述配置的话，则访问/img/目录里面的文件时，ningx会自动去/var/www/image/目录找文件
location /img/ {alias /var/www/image/;
}
#若按照这种配置的话，则访问/img/目录下的文件时，nginx会去/var/www/image/img/目录下找文件。]
location /img/ {root /var/www/image;
}

alias是一个目录别名的定义，root则是最上层目录的定义。

还有一个重要的区别是alias后面必须要用“/”结束，否则会找不到文件的。。。而root则可有可无

nginx动静分离配置

1.根据不同的location 转发

	server {listen       80;server_name   www.mayikt.com;location /static {alias   D:/path/mayikt/images;}		location /member {proxy_pass   http://127.0.0.1:8080/;index  index.html index.htm;}location /order {proxy_pass   http://127.0.0.1:8081/;index  index.html index.htm;}}

2.根据server_name路由转发

	server {listen       80;server_name   static.mayikt.com;location / {alias   D:/path/mayikt/images;}		}

云服务器端 带宽8兆

云服务器 最高每s 下载的峰值 8*128kb /s =1024kb

8.37 MB *1024= 8.5s左右

服务器端带宽

云服务器1Mbps带宽实际下载速度峰值为128KB/S，1M带宽为什么不是1M/S，当然不是，无论是阿里云还是腾讯云或者其他云厂商，云服务器1M带宽实际下载速度都是128KB/S。云服务器N兆带宽下载速度峰值计算公式：128KB/S * N，2M就用128KB/S乘以2，5M乘以5，10M乘以10...以此类推

CDN实现静态资源服务器

js /css /images / 视频

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术

CDN厂商有：阿里云（oss）、七牛云、华为云

1.在云服务器存放静态资源

宝塔安装的nginx ps aux | grep 'nginx';

静态资源目录：/www/wwwroot 我们只需要将静态资源上传到目录即可

2.nginx 相关配置

新增配置：

server {listen       80;server_name  42.192.229.245;location /static {alias   /www/wwwroot;}location / {proxy_pass   http://127.0.0.1:8081;index  index.html index.htm;}
}  

3.重启nginx 访问

http://42.192.229.245/static/mayikt/ CTRL + F5 直接强制刷新，不用缓存 访问速度非常慢

cdn 访问:Java就业+进阶年薪60万学习路线-每特教育

4.使用七牛云cdn、 阿里云(oss)

测试域名过期或被删除

5.刷新cdn

注意：文件上传到cdn上 如果文件内容发生了变化 是需要从新刷新cdn缓存的。

七牛云刷新 cdn：https://portal.qiniu.com/cdn/refresh-prefetch

七、常见错误

错误

1.windows系统nginx重启发生异常：

2.nginx: [error] CreateFile() "C:\Users\chemphern\Desktop\nginx-1.14.0/logs/nginx.pid" failed (2: The system cannot find the file specified)

3.问题分析：启动或者重启nginx需要处理掉原来的nginx进程，正常启动nginx时，会在logs目录下创建nginx.pid文件（默认情况下），实际取决于nginx.conf文件的pid属性。

4.出现该错误的原因是由于某些原因，例如手动删除，其他软件删除，又或者是双击nginx.exe启动的情况（部分window电脑双击nginx.exe无法在logs目录下自动生成nginx.pid文件，不知道是电脑机型原因还是系统原因还是nginx的bug），总之这种情况发生了，避免方法是尽量使用命令行start nginx启动nginx，这时肯定会自动创建.......

5.解决方案：

1.打开系统任务管理器，找到nginx.exe进程，kill掉它

2.打开系统任务管理器，找到nginx.exe进程，右键，转到详细信息，第二栏pid，在logs目录下创建nginx.pid，文件里只写进pid值，保存，再执行你原来的命令。

3.kill掉nginx进程，再次启动它通过命令行启动