登录  |  注册
当前位置：网站首页 > 更多 > 涨姿势 > 正文

[经验分享] 小项目部署经历

作者：CC下载站 日期：2018-04-14 03:27:10 浏览：3033 分类：涨姿势

## 前言
之前本人照葫芦画瓢做了个大概的云笔记，后来巧合之下租了个阿里云的服务器，于是就开始了部署项目的折腾之路,这是我的博客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)。

猜你还喜欢

您需要 登录账户 后才能发表评论

取消回复欢迎 你 发表评论:

精品推荐！
欢迎 访客 登录没有账号？
  • 最新文章
  • 热门文章
  • 热评文章
最新评论
热门tag
友情链接

关灯