JS跨域

在前后端分离的应用中,前端通过调用后台的提供的接口获取数据,然后再渲染到界面上,那么一个不可避免的问题就是js跨域问题。之所以会之所以出现跨域问题,是因为浏览器为了安全启用了一种同源策略(same-origin policy)。
在讨论同源策略的影响之前先要知道什么是『源』。从同源策略的英文same-origin policy,我们就已经知道源的英文origin。大家可以在浏览器的console里面运行一下console.log(location.origin)打印出当前网页的源是什么。就大概知道它其实是包含了网页地址的一些部分。可以看到『源』其实包含了三个部分:协议、域名和端口。只要这三者不同就会受到同源策略的影响。再说回同源策略的影响:它会阻止网页上的js向不同源的服务器发起XMLHttpRequest请求,如下简称XHR。除此之外还会阻止两个不同源的网页互相访问。这不是这篇文章要讨论的点,这里主要讨论的是网页Javascript与服务器之间的跨域请求。
为什么要阻止不同源的XHR请求呢?设想一下,你作为一个普通用户在浏览器里面刷着淘宝(https://taobao.com),这时候邮箱里面来了一封邮件。标题非常的吸引人,于是你不小心在同一个浏览器中点开了(https://attack.com)。这时候网页内包含的恶意代码就可以向淘宝的服务器去发起请求,获取你的隐私(例如商品浏览记录)。因为你用了同一个浏览器,浏览器会记着你的登录session(即cookie)。幸好浏览器有同源策略,taobao.comattack.com不是同源所以不能发起请求。试想一下如果没有同源策略,那网站将会是一个非常不安全的地方。
解决js跨域问题的方式有好几种,这里我只说我在项目中用到的那种:CROS。具体的细节也不是很清楚,直接上代码:
后端应用是8080,前端应用端口是8000,通过测试,直接在前端向后端发送请求时是无法通过的,应该会报401或403的错误,大概就是没有权限的意思。代码如下(请求使用的fetch,这个影响不大,用ajax也一样,两种都有测试):
前端 ,具体的细节可能会有不同,项目中,实际的请求函数也是经过封装的:

fetch("localhost:8080/api/commons/attach", {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;utf-8',
},
body: ……,
}).then(function(response){
   // do something...
})

//后端,就把后端当作一个接口,返回一些数据,不需要纠结这些细节

@Timed
@HapInbound(apiName = "ClbWsCommonUpload")
@RequestMapping(value = "/api/commons/attach", method = RequestMethod.POST, produces = "text/plain;charset=UTF-8")
@ResponseBody
public String upload(HttpServletRequest request)
      throws StoragePathNotExsitException, UniqueFileMutiException, JsonProcessingException {

   IRequest requestContext = createRequestContext(request);
   Locale locale = RequestContextUtils.getLocale(request);
   return uploadService.Upload(request,locale,requestContext);
}

代码都写好之后,在js中发送请求,发送失败。
现在做如下修改,在后端中添加一个 过滤器,过滤器的主要代码如下:

package clb.core.common.filter;

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Created by spilledyear on 2017/4/24.
 */
public class CorsFilter implements Filter {

    @Override
    public void init(FilterConfig arg0) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {

        HttpServletResponse response = (HttpServletResponse) res;

        // 指定允许其他域名访问
        response.setHeader("Access-Control-Allow-Origin", "*");
        // 响应类型
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE");
        // 响应头设置
        response.setHeader("Access-Control-Allow-Headers", "token,Content-Type,Access-Control-Allow-Origin,Access-Control-Allow-Methods,Access-Control-Max-Age,authorization");
//        response.setHeader("Access-Control-Max-Age", "3600");

        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {

    }
}

添加过滤器之后,再次在前端发送请求,发现可以访问成功。这就是js跨域的一种解决方式,这种方式需要在后台做相应的处理。

推荐阅读更多精彩内容