一、跨域形成的原因

1、跨域的限制是因为同源策略，同源策略约定了某一个页面向服务器发起ajax请求时，页面的资源地址必须与所请求的服务器地址相同，也就是同源，同源是指"协议、域名、端口"三者相同，任意一个不同都被认为不同源，也就是即使是同一台电脑，端口不同也是跨域的。例如：xyz.com下的js脚本采用ajax读取abc.com里面的文件数据、或者向abc.com提交数据都是跨域。

并不是所有内容都是受同源策略限制的。

2、同源策略限制内容有：

1. Cookie、LocalStorage、IndexedDB 等存储性内容。
2. DOM 节点。
3. AJAX 请求发送后，结果被浏览器拦截了。

有三个标签是允许跨域加载资源，这也是我们在开发时能直接使用cdn加载vue.js和能使用图床的原因。

1. <img src=XXX>
2. <link href=XXX>
3. <script src=XXX>

3、需要强调的是跨域并不是请求发不出去，请求能发出去。

这个时候又分两种情况，简单请求和预检请求。

简单请求：服务端收到请求并正常返回结果，但是这个返回的结果被浏览器认为是不安全的，从而拦截了。

预检请求：浏览器在正式通信之前，增加一次HTTP查询请求，先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

详细可参考：http://www.ruanyifeng.com/blog/2016/04/cors.html

二、解决跨域

1. 服务端（java），最好的方法，前端啥都不用做，推荐最后一种，直接加个注解就行啦，方便简单。

• 在被请求资源中添加响应头信息" Access-Control-Allow-Origin：* "。
• 在项目中添加如下过滤器：

/**
 * 解决跨域问题
 */
public class AccessControlAllowOriginFilter implements Filter {
    public void doFilter(ServletRequest req, 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, DELETE");
        response.setHeader("Access-Control-Allow-Credentials", "true");
　　　　 chain.doFilter(req, response);
   } 
   public void init(FilterConfig filterConfig) {
   } 
   public void destroy() {
   } 
}

• 在Spring Boot中拥有大量的注解，针对跨域问题，也提供了对应的注解@CrossOrigin，使用方法如下：

import java.util.HashMap;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
@RestController
//@CrossOrigin (直接在这里添加也行)
@RequestMapping(value = "/api", method = RequestMethod.POST)
public class DemoController {
    @CrossOrigin(origins = "*")
    @RequestMapping(value = "/get")
    public String get() {
       ……
    }
}

2. 前端（使用代理），复杂网络情况下不行，比如，我们公司使用代理上网，为了方便移动端测试，我们还使用了内网穿透（natapp），在这种情况下即使是使用了nginx代理实现跨域也会失效。具体实现看这里：nginx 解决跨域、手机测试，vuecli3也有，原理是一样的。

3. 网上查到的一下不方便的方法，有兴趣的自己去百度，关键字后面加个跨域就好了：

• jsonp
• postMessage
• document.domain
• canvas操作图片的跨域问题