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.com和attack.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跨域的一种解决方式，这种方式需要在后台做相应的处理。