[经验分享] 小项目部署经历
作者:CC下载站 日期:2018-04-14 03:27:10 浏览:3031 分类:涨姿势
之前本人照葫芦画瓢做了个大概的云笔记,后来巧合之下租了个阿里云的服务器,于是就开始了部署项目的折腾之路,这是我的博客https://codegitz.github.io/,欢迎指正
## 服务器环境准备
cloud_note是一个基于javaweb的项目,所以需要配置java环境,还有需要Tomcat启动服务,jdk我选择的是1.7.79,Tomcat7.0.23,然后就是安装,配置路径,这里就不多说了。
## 项目导出与部署
我使用的是eclipse,右击项目,export,导出war file
destination 选择你要导出的路径
然后将war文件上传到服务器上,放到webapps目录下,Tomcat启动运行之后会自动生成一个与你war文件名对应的文件夹,里面就包含了你项目的所有东西,如图
然后通过bin目录下的startup.bat启动Tomcat,可以在本地访问项目了。
值得一提的是,阿里云服务器需要在安全组开放对应的端口才可以访问,不然是无法访问的,例如启动Tomcat需要开放8080端口,还有数据库的3306端口也要开放
安全组--配置规则--添加安全组规则
至此项目服务器部署已经完毕
## 问题
部署完毕后我发现用服务器的公网ip加项目名无法访问项目,而且控制台也没有报错,后来在浏览器发现是无法加载资源,经老三提醒后发现是js跨域的问题,找到了方向之后成功解决了这个问题。第一次部署,没有留意到跨域的问题,莫名了很久,终于解决了。
## js跨域
跨域访问,或者说 JavaScript 的跨域访问问题,是浏览器出于安全考虑而设置的一个限制,即同源策略。举例说明,当 A,B 两个网站属于不同的域时,如果来自于 A 网站的页面中的 JavaScript 代码希望访问 B 网站的时候,浏览器会拒绝该访问。
解决跨域方式有很多种,其中有jsonp,但是只能处理get请求。
所以我采用了CORS。
## CORS
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
### 简介
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
### 两种请求方式
浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request),浏览器对于两种请求的处理方式不一样。
满足以下两大条件就是简单请求
```
(1) 请求方法是以下三种方法之一:
HEAD
GET
POST
2)HTTP的头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
```
java后台解决方法有两个:
#### 第一种
1.自己建一个corsfilter类
```
package io.codegitz.cloud_note.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component;
@Component
public class CorsFilter implements Filter{
//@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
//@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse)servletResponse;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
response.setHeader("Access-Control-Allow-Credentials", "true");
filterChain.doFilter(servletRequest, servletResponse);
}
//@Override
public void destroy() {
}
}
```
预检请求会附带一些关于接下来的请求的信息给服务器,主要有以下几种:
Origin:请求的源域信息
Access-Control-Request-Method:接下来的请求类型,如POST、GET等
Access-Control-Request-Headers:接下来的请求中包含的用户显式设置的Header列表
服务器端收到请求之后,会根据附带的信息来判断是否允许该跨域请求,信息返回同样是通过Header完成的:
Access-Control-Allow-Origin:允许跨域的Origin列表
Access-Control-Allow-Methods:允许跨域的方法列表
Access-Control-Allow-Headers:允许跨域的Header列表
Access-Control-Expose-Headers:允许暴露给JavaScript代码的Header列表
Access-Control-Max-Age:最大的浏览器缓存时间,单位s
以上行为都是浏览器自动完成的,用户无需关注这些细节。如果服务器配置正确,那么和正常非跨域请求是一样的。
2.在web.xml文件中配置
```
filter
filter-namecors/filter-name
filter-classio.codegitz.cloud_note.filter.CorsFilter/filter-class
/filter
filter-mapping
filter-namecors/filter-name
url-pattern*.do/url-pattern
/filter-mapping
```
#### 第二种
这种方式似乎要spring4.2以上才支持,利用提供的jar包,下载 cors-filter-1.7.jar, java-property-utils-1.9.jar 这两个库文件放到lib目录下。(放到对应项目的webcontent/WEB-INF/lib/下),如果是maven项目,可以简单添加如下依赖到pom.xml中即可
```
dependency
groupIdcom.thetransactioncompany/groupId
artifactIdcors-filter/artifactId
version[ version ]/version
/dependency
```
接着添加CORS配置到web.xml文件中
```
!-- 跨域配置,此filter应该放在所有filter之前--
filter
!-- The CORS filter with parameters --
filter-nameCORS/filter-name
filter-classcom.thetransactioncompany.cors.CORSFilter/filter-class
!-- Note: All parameters are options, if omitted the CORS
Filter will fall back to the respective default values.
--
init-param
param-namecors.allowGenericHttpRequests/param-name
param-valuetrue/param-value
/init-param
init-param
param-namecors.allowOrigin/param-name
param-value*/param-value
/init-param
init-param
param-namecors.allowSubdomains/param-name
param-valuefalse/param-value
/init-param
init-param
param-namecors.supportedMethods/param-name
param-valueGET, HEAD, POST, OPTIONS/param-value
/init-param
init-param
param-namecors.supportedHeaders/param-name
param-valueAccept, Origin, X-Requested-With, Content-Type, Last-Modified/param-value
/init-param
init-param
param-namecors.exposedHeaders/param-name
!--这里可以添加一些自己的暴露Headers --
param-valueX-Test-1, X-Test-2/param-value
/init-param
init-param
param-namecors.supportsCredentials/param-name
param-valuetrue/param-value
/init-param
init-param
param-namecors.maxAge/param-name
param-value3600/param-value
/init-param
/filter
filter-mapping
!-- CORS Filter mapping --
filter-nameCORS/filter-name
url-pattern/*/url-pattern
/filter-mapping
```
配置完成之后可以发送另起一个项目或者页面来测试配置是否成功
```
!DOCTYPE HTML
html
head
meta charset="utf-8"
script type="text/javascript" src="scripts/jquery.min.js"/script
script type="text/javascript" src="scripts/basevalue.js"/script
script type="text/javascript"
$(function(){
//按钮单击时执行
$("#testAjax").click(function(){
//取Ajax返回结果
$.ajax({
url:path+"/test/ajax.do",
data:{},
dataType:"json",
type:"post",
success:function(result){
$("#myDiv").empty;
$("#myDiv").html(result.msg);
//显示Ajax返回结果
alert(result.msg);
},
error:function(){
alert("错误");
}});
});
});
/script
/head
body
div id="myDiv"h2返回跨域的文本/h2/div
button id="testAjax" type="button"点击获取Ajax跨域返回内容/button
/body
/html
```
浏览器输入http://47.106.120.224/cloud_note/Filter.html
成功返回文本跨域请求成功
## 小结
本次遇到的问题不大,都是没留意的小问题,倒是项目本身还有许多不完整的地方,bug多多,有时间再修改,源码稍后传到GitHub上,欢迎[star](https://github.com/codegitz/cloud_note)。
猜你还喜欢
- 06-29 [涨姿势] 鱼丸批量化生产流程,什么是鱼丸加工流水线?都有哪些设备组成?
- 06-29 [涨姿势] 食为先培训的陷阱和套路?凉菜不是你想卖就能卖?
- 06-29 [涨姿势] 开面馆不是梦,但也不是人人都能驾驭
- 05-13 [摄影] 让手机秒变单反的手机拍摄好物
- 05-11 [摄影] 想挣钱的摄影师建议收藏!
- 05-11 [美食] 选址秘籍:从摆摊到开小店,大数据地图助你找到理想店铺位置
- 05-04 [知识分享] 「科普」不知道电影资源那么长一大串名字是什么意思?看完这个你就明白了!
- 04-30 [摄影] 玩转手机摄影 | 滤镜手机支架
- 04-30 [经验] 摆地摊的八大禁忌
- 04-27 [绘画] 油画棒原创作品【绽放】图文教程来咯~
- 04-17 [涨姿势] 餐饮管理故事:对不起,我订错了雅间,怎么办?(附解决方案)
- 03-29 [摄影课堂] 电光火石间的决定
取消回复欢迎 你 发表评论:
- 精品推荐!
-
- 最新文章
- 热门文章
- 热评文章
[美剧] 瑞克和莫蒂 [S01-S07][2013-2023]
[电影] 【李连杰】经典合集 [共46部][271GB]
[健康养生] 人体有7个降糖穴,每天按一按,有助于调理血糖
[电影] 《黄飞鸿》全系列合集
[电影] 《方世玉》全系列合集(蓝光原盘REMUX)
[影视] 都是陌生人 4K蓝光原盘下载/亲爱的陌生人(台) / 我们都是陌生人 / 与幽灵同在的夏天 / 遭遇异人的夏天 / 异人们的夏天 / Strangers 2023 All of Us Strangers 71.56G
[影视] 姥姥的外孙 WEB-DL版下载/全职乖孙(港) / 金孙爆富攻略(台) / 粥味奇缘 / 中国家庭 / The Chinese Family / How to Make Millions Before Grandma Dies 2024 หลานม่า 7.64G
[影视] 监狱剧院 WEB-DL版下载/唱唱 2023 Sing Sing 16.51G
[美图] 【经典收藏美图集合】1500多张韩国美女高清图片让你的收藏夹更加丰富多彩
[动漫] 《元尊》2024国漫 [4K HDR][国语中字][1-26集.完结]
[文件编辑] WinHex 21.2 SR-2_x86_x64 绿色单文件版
[图片浏览] 2345看图王去广告安装版 x86 x64 11.3.0.10165
[电影] 死侍与金刚狼 DeadPool.And.Wolverine.2024.V4.2160p [MP4]
[游戏] 《黑神话悟空》免安装学习版【全dlc整合完整版】+Steam游戏解锁+游戏修改工具!
[涨点姿势] 男性性技宝典:14招实战驭女术——爱抚、按摩、催情、姿势、高潮全攻略
[美剧] [黑袍纠察队 第四季][全8集][MKV][中文字幕][1080P]
[电视剧集] [BT下载][黑暗城市- 清扫魔 Dark City: The Cleaner 第一季][全06集][英语无字][MKV][720P/1080P][WEB-RAW]
[影视] 九龙城寨之围城 WEB-DL版下载/九龙城寨 / Twilight of the Warriors: Walled In 2024 九龍城寨·圍城 22.68G
[短剧] 被下架·禁播的羞羞短剧·午夜短剧合集
[课程]【黑马程序员】Python开发就业课 - 带源码课件
[影视] 九龙城寨之围城 WEB-DL版下载/九龙城寨 / Twilight of the Warriors: Walled In 2024 九龍城寨·圍城 22.68G
[影视] 美国内战 4K蓝光原盘下载+高清MKV版/内战/帝国浩劫:美国内战(台)/美帝崩裂(港) 2024 Civil War 63.86G
[瓜] 恒大歌舞团被扒,意外暴露惊人内幕,难怪许家印商业帝国会崩盘
[资源] 精整2023年知识星球付费文合集136篇【PDF格式】
[文件编辑] WinHex 21.2 SR-2_x86_x64 绿色单文件版
[图片浏览] 2345看图王去广告安装版 x86 x64 11.3.0.10165
[美图] 【经典收藏美图集合】1500多张韩国美女高清图片让你的收藏夹更加丰富多彩
[写真] 宫本桜 碧蓝航线 能代本典藏版-全套福利付费写真
[瓜] 青岛【路虎女】插队、逆行、追尾、打人未删减【完整版视频】
[电视剧] 灵魂摆渡(1-3季合集)【未删减】【4K.无水印】【剧情/恐怖/惊悚】【豆瓣8.7】
- 最新评论
- 热门tag