浏览器只允许请求当前域的资源，而对其他域的资源表示不信任。那怎么才算跨域呢？

1. 请求协议http,https的不同
2. 域domain的不同
3. 端口port的不同

好好好，大概就是这么回事啦，下面我们讲2种中规中矩的办法：CORS，JSONP
document.domain，window.name，web sockets就先别闹了，腰不好 : )

2、CORS

这是W3C的标准，全称是"跨域资源共享"（Cross-origin resource sharing）。我们先来看看整个流程

在此之前，需要知道简单请求 复杂请求这两个小朋友

1.简单请求：
    1): 请求方式只能是：head，get，post
    2): 请求头允许的字段：Accept，Accept-Language，Content-Language，Last-Event-ID
   Content-Type：application/x-www-form-urlencoded、multipart/form-data、text/plain 三选一

2.复杂请求：除了简单请求的其他情况

请求头origin字段为当前域

服务器：诶，你是谁，我来看看你的origin，嗯嗯，可以，符合我的要求，放行！顺便告诉你，老夫的规矩！

 

其中，最重要的就是Access-Control-Allow-Origin，标识允许哪个域的请求。当然，如果服务器不通过，根本没有这个字段，接着触发XHR的onerror，再接着你就看到浏览器的提示xxx的服务器没有响应Access-Control-Allow-Origin字段

 

//指定允许其他域名访问
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，动态设置），3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
'Access-Control-Allow-Credentials:true'

上面第一行说到的Access-Control-Allow-Origin有多种设置方法：

1. 设置*是最简单粗暴的，但是服务器出于安全考虑，肯定不会这么干，而且，如果是*的话，游览器将不会发送cookies，即使你的XHR设置了withCredentials
2. 指定域，如上图中的http://172.20.0.206，一般的系统中间都有一个nginx，所以推荐这种
3. 动态设置为请求域，多人协作时，多个前端对接一个后台，这样很方便

withCredentials：表示XHR是否接收cookies和发送cookies，也就是说如果该值是false，响应头的Set-Cookie，浏览器也不会理，并且即使有目标站点的cookies，浏览器也不会发送。

复杂请求:

最常见的情况，当我们使用put和delete请求时，浏览器会先发送option（预检）请求，不过有时候，你会发现并没有，这是后面我们会讲到缓存。

预检请求

与简单请求不同的是，option请求多了2个字段：
Access-Control-Request-Method：该次请求的请求方式
Access-Control-Request-Headers：该次请求的自定义请求头字段

服务器检查通过后，做出响应：

//指定允许其他域名访问
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，动态设置），3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
'Access-Control-Allow-Credentials:true'
//预检结果缓存时间,也就是上面说到的缓存啦
'Access-Control-Max-Age: 1800'
//允许的请求类型
'Access-Control-Allow-Methods:GET,POST,PUT,POST'
//允许的请求头字段
'Access-Control-Allow-Headers:x-requested-with,content-type'

这里有个注意点：Access-Control-Request-Method，Access-Control-Request-Headers返回的是满足服务器要求的所有请求方式，请求头，不限于该次请求.

问题所在:

1. 避免将Access-Control-Allow-Origin设置为null和*
2. 禁止直接反射HTTP请求头中的Origin字段值。对请求头Origin值做严格过滤、校验。具体来说，可以使用“全等于”判断，或使用严格的正则（如：^https://domain\.qq\.com$）进行判断。

设置 Access-Control-Allow-Origin 有多种方式,这里写两种

一. 微服务中整合springSecurity,

1.编写过滤器

package com.wf.config;

import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

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

@Order(Ordered.HIGHEST_PRECEDENCE)
@Component
@Slf4j
public class CORSFilter implements Filter {

    @Value("${allow.origin.regex}") //apollo配置 ,允许跨域访问的主体
    private String originRegex;

    @Override
    public void init(FilterConfig filterConfig) 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", originRegex);
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(request, response);
    }

    public void destroy() {}

}

2.添加过滤器

package com.wf.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity security) throws Exception {
        security.csrf().disable();
        security.headers().frameOptions().disable();
        //加入过滤器
        security.addFilterBefore(new CORSFilter(), UsernamePasswordAuthenticationFilter.class);
    }
}

2. nginx 配置

location / {  
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers "X-Requested-With";
  add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
} 

如果同时配置服务器过滤器与nginx ,则会看到页面错误:

The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed

看上面错误提示，contains multiple values "*" 意思就是设置了2次跨域，但是只有一个是允许的，移除其中的任意一个就好了。如果服务器设置了允许跨域，使用Nginx代理里面就不需要了（或者就不用使用Nginx了）