零基础学JavaWeb开发（二十六）之 nginx（2）

news2024/11/27 19:44:10

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

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

URL

说明

是否允许通信

http://www.a.com/a.js

http://www.a.com/b.js

同一域名下

允许

http://www.a.com/lab/a.js

http://www.a.com/script/b.js

同一域名下不同文件夹

允许

http://www.a.com:8000/a.js

http://www.a.com/b.js

同一域名，不同端口

不允许

http://www.a.com/a.js

https://www.a.com/b.js

同一域名，不同协议

不允许

http://www.a.com/a.js

http://192.168.110.11/b.js

域名和域名对应ip

不允许

http://www.a.com/a.js

http://script.a.com/b.js

主域相同，子域不同

不允许

http://www.a.com/a.js

http://a.com/b.js

同一域名，不同二级域名（同上）

不允许（cookie这种情况下也不允许访问）

http://www.cnblogs.com/a.js

http://www.a.com/b.js

不同域名

不允许

5.2、环境的准备

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

user.html

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 为给定 ID 的 user 创建请求
axios.get('http://api.mayikt.com/getUser')
  .then(function (response) {
    alert("code:"+response.data.code);
    alert("msg:"+response.data.msg);
  })
  .catch(function (error) {
     alert("error:"+error);
  });

</script>

2.后端接口

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

nginx 解决跨域问题

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

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

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 为给定 ID 的 user 创建请求
axios.get('http://www.mayikt.com/api/getUser')
  .then(function (response) {
    alert("code:"+response.data.code);
    alert("msg:"+response.data.msg);
  })
  .catch(function (error) {
     alert("error:"+error);
  });

</script>
	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进程，再次启动它通过命令行启动

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/180500.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

力扣刷题记录——697. 数组的度、728. 自除数 、821. 字符的最短距离

力扣刷题记录——697. 数组的度、728. 自除数 、821. 字符的最短距离

本专栏主要记录力扣的刷题记录&#xff0c;备战蓝桥杯&#xff0c;供复盘和优化算法使用&#xff0c;也希望给大家带来帮助&#xff0c;博主是算法小白&#xff0c;希望各位大佬不要见笑&#xff0c;今天要分享的是——《力扣刷题记录——697. 数组的度、728. 自除数 、821. 字…
阅读更多...
腾讯云开发者2022年度热文盘点

腾讯云开发者2022年度热文盘点

01十亿人都在用的健康码运维体系如何设计&#xff1f;随着疫情防控模式的迭代&#xff0c;健康码访问DAU逐渐趋于下跌&#xff0c;意味着健康码将逐步完成历史使命&#xff0c;见证着疫情的结束。本文特邀腾讯研发工程师李雄政将从技术架构、可观测体系、运营保障体系等运维体系…
阅读更多...
星德胜冲刺上交所上市：计划募资约10亿元，朱云舫为实际控制人

星德胜冲刺上交所上市：计划募资约10亿元，朱云舫为实际控制人

近日&#xff0c;星德胜科技&#xff08;苏州&#xff09;股份有限公司&#xff08;下称“星德胜”&#xff09;预披露更新招股书&#xff0c;准备在上海证券交易所主板上市。据贝多财经了解&#xff0c;星德胜于2022年7月1日递交上市申请&#xff0c;海通证券为其保荐机构。 …
阅读更多...
java ssm学生成绩查询考务系统

java ssm学生成绩查询考务系统

1 绪论 1 1.1 项目背景 1 1.2 项目研究的目的和方法 1 1.2.1 项目的研究目的 1 1.2.2 开发方法及步骤 1 1.3 本章小结 2 2. 开发平台介绍 3 2.1 系统开发环境 3 2.1.1 Eclipse 3 2.2 相关技术 4 2.2.1 JSP技术 …
阅读更多...
Web Spider 常见混淆EVAL、AA、JJ、JSFUCK

Web Spider 常见混淆EVAL、AA、JJ、JSFUCK

文章目录一、EVAL & constructor二、AA混淆三、JJ混淆四、JSFUCK五、针对混淆的方法简单hook总结混淆的原理&#xff1a;就是把原本清晰的代码故意搞得花里胡哨&#xff0c;让局外人看不懂&#xff1b; 混淆的目的&#xff1a;让逆向者很难理解代码的意图&#xff0c;无法读…
阅读更多...
随笔集1.24

随笔集1.24

秋夜独坐经常性会出现啥都不想干的情况&#xff0c;似那黄鹤一去不复返&#xff0c;只留下脑海的白云千载空悠&#xff0c;对任何事情&#xff0c;读书、研究、游戏都提不起兴趣&#xff0c;每当此时静坐于窗下灯前&#xff0c;想起王摩诘所谓雨中山果落&#xff0c;灯下草虫鸣…
阅读更多...
第二章-计算机网络物理层

第二章-计算机网络物理层

文章目录计算机网络一、物理层1.1、物理层的基本概念1.2、数据通信的基本知识编码与调制编码调制混合调制信道的极限容量传输方式1.3、物理层下面的传输媒体导引型传输媒体非导引型传输媒体1.4、互联网接入技术电话网拨号接入数字用户线接入光纤同轴混合网接入光纤接入无线接入…
阅读更多...
用友BIP对接外部旺店通企业版奇门系统

用友BIP对接外部旺店通企业版奇门系统

用友BIP对接外部旺店通企业奇门系统源系统:旺店通企业奇门慧策最先以旺店通ERP切入商家核心管理痛点——订单管理&#xff0c;之后围绕电商经营管理中的核心管理诉求&#xff0c;先后布局流量获取、会员管理、仓库管理等其他重要经营模块。慧策的产品线从旺店通ERP起步&#xf…
阅读更多...
Jetpack架构组件库：Lifecycle、LiveData、ViewModel

Jetpack架构组件库：Lifecycle、LiveData、ViewModel

Lifecycle 添加依赖 dependencies {def lifecycle_version "2.5.1" // ViewModelimplementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"// ViewModel utilities for Composeimplementation "androidx.lifecycle:lifecy…
阅读更多...
解决nes_py在pip安装报错的问题

解决nes_py在pip安装报错的问题

目录 项目场景&#xff1a; 问题描述 原因分析&#xff1a; 解决方案&#xff1a; 解决结果&#xff1a; 项目场景&#xff1a; 想跟随油管某视频复现强化学习方法玩超级马里奥的过程&#xff0c;结果在在Anaconda3虚拟环境中用pip安装nes_py时一直报错&#xff0c;报错信…
阅读更多...
基于Python实现的图像文字识别OCR工具，包含GUI界面附完整版代码可直接运行

基于Python实现的图像文字识别OCR工具，包含GUI界面附完整版代码可直接运行

引言 最近在技术交流群里聊到一个关于图像文字识别的需求，在工作、生活中常常会用到，比如票据、漫画、扫描件、照片的文本提取。 博主基于 PyQt + labelme + PaddleOCR 写了一个桌面端的 OCR 工具，用于快速实现图片中文本区域自动检测 + 文本自动识别。 识别效果如下图所示：…
阅读更多...
总结JDK中的时间日期类

总结JDK中的时间日期类

在学习SpringMVC时&#xff0c;遇到了接收时间日期类型的参数的案例。 回顾JDK中与时间日期相关的API。 来系统地学习一下日期时间相关的API。 前置知识 在世界上有统一的时间标准 格林尼治时间&#xff0c;简称GMT&#xff08;以伦敦的本初子午线为标准&#xff09;&#x…
阅读更多...
【BTC】数据结构

【BTC】数据结构

BTC 中对交易数据的存储主要涉及到了两种数据结构&#xff0c;一种是区块链&#xff0c;一种是 Merkle Tree。这两种数据结构组成了 BTC 中完整的区块链结构&#xff08;如下图所示&#xff09;&#xff0c;共同完成对数据的存储和验证&#xff0c;确保交易的有效性。 一、区块…
阅读更多...
常见的反爬手段和解决思路

常见的反爬手段和解决思路

常见的反爬手段和解决思路 学习目标 了解 服务器反爬的原因了解 服务器常反什么样的爬虫了解 反爬虫领域常见的一些概念了解 反爬的三个方向了解 常见基于身份识别进行反爬了解 常见基于爬虫行为进行反爬了解 常见基于数据加密进行反爬 1 服务器反爬的原因 爬虫占总PV(PV是指…
阅读更多...
基于nodejs+vue的中国古诗词的设计与实现

基于nodejs+vue的中国古诗词的设计与实现

目 录 摘要 I Abstract II 1 绪论 1 1.1 选题背景 1 1.2 选题意义 1 1.3 研究内容 2 2 相关技术介绍 3 3 系统分析 5 3.1可行性分析 5 3.1.1 操作可行性 5 3.1.2 经济可行性 5 3.1.3 技术可行性 5 3.2 需求分析 5 3.2.1非功能性需求 …
阅读更多...
Python学习——(数据类型及其常用函数)

Python学习——(数据类型及其常用函数)

目录 一、数据类型 判断数据类型type() 二、数据类型的转换 三、运算符 (一)算数运算符 (二)赋值运算符 (三)复合赋值运算符 (四)比较运算符 (五)逻辑运算符 四、输入输出 (一)输出 (二)输入 五、各数据类型常用函数 (一)数值函数 1.绝对值abs(x) 2.最大值max(…
阅读更多...
Git + Jenkins 自动化 NGINX 发布简易实现

Git + Jenkins 自动化 NGINX 发布简易实现

概述 之前基于 GitLab Jenkins 实现了简单的 NGINX 的自动化发布。 具体包含如下的组件&#xff1a; GitLab包括 GItLab 的 WebHook&#xff1b; Jenkins 及其插件&#xff1a;Generic Webhook TriggerPublish Over SSH &#x1f9e0;疑问&#xff1a; 为什么不用 Ansible&…
阅读更多...
算法训练营DAY44|518. 零钱兑换 II、377. 组合总和 Ⅳ

算法训练营DAY44|518. 零钱兑换 II、377. 组合总和 Ⅳ

这两道题是对于完全背包题型的另一个维度&#xff0c;都是求解给定背包容量求装满背包最多有几种方法的题目。两道题十分相像&#xff0c;但在遍历顺序上却又有着极其微妙的差别。 518. 零钱兑换 II - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/coin…
阅读更多...
看完流浪地球2，这些功课你必须要补

看完流浪地球2，这些功课你必须要补

昨天看了流浪地球2&#xff0c;里面的信息量太大了&#xff0c;回来补充了一些功课&#xff0c;这些知识&#xff0c;看完&#xff0c;才算对流浪地球2有了进一步了解。地球人的航天路径我们的太空航程是什么样子的呢&#xff1f;要从第二次世界大战开始。回形针计划&#xff1…
阅读更多...
金仓数据库简单巡检与事务阻塞会话简单处理

金仓数据库简单巡检与事务阻塞会话简单处理

查看KES版本信息 使用version函数查看 这种方式能详细显示信息 使用ksql查看 查看license有效期 查看实例启动时间和运行时长 查看实例启动时间 查看KES无故障运行时长 查看数据库列表 使用元命令\l查看 使用字典查看 查看数据库占用的磁盘空间 统计当前数据库所占的磁盘空…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023