[CORS] 跨域访问的

最新推荐文章于 2024-08-20 10:51:49 发布

abcd1101

最新推荐文章于 2024-08-20 10:51:49 发布

阅读量469

点赞数

分类专栏： spring 有趣的前端文章标签：跨域访问 cors

spring 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

有趣的前端

3 篇文章 0 订阅

订阅专栏

1. tomcat访问不需要端口可以设成80

2.在C:\Windows\System32\drivers\etc 改host文件就可以改本地的地址名

3.在发post请求时它会带origin，这个就是参考访问这个服务器的服务器的地址和端口。所以开启tomcat，端口设成80，访问的时候就可以就直接用host的那个地址，然后origin就会记录下host文件那个地址。

4.跨域访问感觉流程就是

CORS定义了两种跨域请求，简单跨域请求和非简单跨域请求。当一个跨域请求发送简单跨域请求包括：请求方法为HEAD，GET，POST;请求头只有4个字段，Accept，Accept-Language，Content-Language，Last-Event-ID;如果设置了Content-Type，则其值只能是application/x-www-form-urlencoded,multipart/form-data,text/plain。说起来比较别扭，简单的意思就是设置了一个白名单，符合这个条件的才是简单请求。其他不符合的都是非简单请求。非简单请求就要发preflight。

1)客户端发个options请求到服务器端（从而确保服务器是安全的）-简称preflight，预请求

2)服务器端会回复并带有access-control-allow-origin的头

3)浏览器会看这个头包不包含客户端的origin的地址，如果origin是null，可能就会返回401

4)如果包含就继续发post or get or jsonp请求，如果不是可能就是返回403

$http({
						method : 'POST',
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
							,'Origin': 'domain'
							,'Access-Control-Allow-Origin': 'domain'
						},
						url : 'url'
					  }).success(function(data){
						$scope.mapList = [];
						$scope.mapList = data.body.results;
					});

http://www.open-open.com/lib/view/open1463878352785.html

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。 只要服务器实现了CORS接口 ，就可以跨源通信。

解决这个问题的关键就落在了我这个负责后台的程序猿身上。

看看文档也不是什么难事嘛，就是需要在http头中设置Access-Control-Allow-Origin来决定需要允许哪些站点来访问。关于CROS协议更详细内容参考跨域资源共享 CORS 详解

Access-Control-Allow-Origin: http://kbiao.me  

Access-Control-Max-Age: 3628800

Access-Control-Allow-Methods: GET，PUT, DELETE

Access-Control-Allow-Headers: content-type

“Access-Control-Allow-Origin”表明它允许”http://kbiao.me “发起跨域请求

“Access-Control-Max-Age”表明在3628800秒内，不需要再发送预检验请求，可以缓存该结果（上面的资料上我们知道CROS协议中，一个AJAX请求被分成了第一步的 OPTION 预检测请求和正式请求）

“Access-Control-Allow-Methods”表明它允许GET、PUT、DELETE的外域请求

“Access-Control-Allow-Headers”表明它允许跨域请求包含content-type头

当然在处理这个问题的时候前端也有不少坑，特别是Chrome浏览器不允许localhost的跨域请求，详细方案见我项目中负责前端解决方案的小伙伴。假装有链接

常规解决方案

知道了问题的原因，也知道了配套的解决办法，现在就让我们来实现解决。思路很简单，当前端要请求跨域资源时候，我们给它加上响应的响应头即可。很显然我们自己定义一个过滤器是最简单不过了。

/**
 * Created by kangb on 2016/5/10.
 */
@Component
public class myCORSFilter 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;
        String origin = (String) servletRequest.getRemoteHost()+":"+servletRequest.getRemotePort();
        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() {

    }
}

@Component 是Spring的注解，关键部分在doFilter中，添加了我们需要的头， option 是预检测需要所以需要允许， Authorization 是做了oauth2登录响应所必须的， Access-Control-Allow-Credentials 表示允许cookies。都是根据自己项目的实际需要配置。

再配置Web.xml使得过滤器生效

<filter>
  <filter-name>cors</filter-name>
  <filter-class>·CLASS_PATH·.myeCORSFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>cors</filter-name>
  <url-pattern>/api/*</url-pattern>
</filter-mapping>

接下来前端就可以像往常一样使用AJAX请求获得资源了，完全不需要做出什么改变。