一、跨域形成的原因
1、跨域的限制是因为同源策略，同源策略约定了某一个页面向服务器发起ajax请求时，页面的资源地址必须与所请求的服务器地址相同，也就是同源，同源是指"协议、域名、端口"三者相同，任意一个不同都被认为不同源，也就是即使是同一台电脑，端口不同也是跨域的。例如：xyz.com下的js脚本采用ajax读取abc.com里面的文件数据、或者向abc.com提交数据都是跨域。
并不是所有内容都是受同源策略限制的。
2、同源策略限制内容有：
- Cookie、LocalStorage、IndexedDB 等存储性内容。
- DOM 节点。
- AJAX 请求发送后，结果被浏览器拦截了。
有三个标签是允许跨域加载资源，这也是我们在开发时能直接使用cdn加载vue.js和能使用图床的原因。
- <img src=XXX>
- <link href=XXX>
- <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操作图片的跨域问题
