跨域是怎么一回事？

秒速五厘米 2022-12-03 09:42 287阅读 0赞

# 跨域是什么？ #

就是一个页面想去获取另一个页面的中的资源，出于安全考虑，浏览器通过**同源策略**对JavaScript实施的安全限制。出现的现象就是：

1.  Cookie、LocalStorage（做vue持久化的） 和 IndexDB （vue的用来做数据缓存的）无法读取
2.  DOM 和 JS 对象无法获取
3.  Ajax请求发送不出去

# 同源策略是什么？ #

它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

origin：Web内容的源由用于访问它的[URL][]的方案(协议)，主机(域名)和端口定义。只有当方案，主机和端口都匹配时，两个对象具有相同的起源。

## **同源**的**定义** ##

如果两个 URL 的 协议（https，http）、端口 (如果有指定的话)和网址都相同的话，则这两个 URL 是*同源*。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。（“元组” 是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）

## 例子：以我们WMS系统的一个url为例：http://localhost:6081/aaa/1 ##

调用一下url

<table> 
 <thead> 
  <tr> 
   <th>URL</th> 
   <th align="left">结果</th> 
   <th align="left">原因</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>http://localhost:6081/bbb/2</code></td> 
   <td align="left">同源</td> 
   <td align="left">只有路径不同</td> 
  </tr> 
  <tr> 
   <td>http://localhost:6081/controller-systemGoodsBrandService/front/uploadFile</td> 
   <td align="left">同源</td> 
   <td align="left">只有路径不同</td> 
  </tr> 
  <tr> 
   <td><code>https://localhost:6081/bbb/2</code></td> 
   <td align="left">失败</td> 
   <td align="left">协议不同</td> 
  </tr> 
  <tr> 
   <td><code>http://localhost:6083/bbb/2</code></td> 
   <td align="left">失败</td> 
   <td align="left">端口不同 ( <code>http://</code> 默认端口是80)</td> 
  </tr> 
  <tr> 
   <td><code>http://10.168.1.2:6081/bbb/2</code></td> 
   <td align="left">失败</td> 
   <td align="left">主机不同</td> 
  </tr> 
  <tr> 
   <td>http://127.0.0.1:6081/aaa/1</td> 
   <td align="left">失败</td> 
   <td align="left">路径不通</td> 
  </tr> 
 </tbody> 
</table>

特别注意127.0.0.1和localhost调用是跨域的，他们不同源

# 跨域的解决方法 #

## 常见两种机制 ##

## CORS机制 ##

### cors的思路 ###

\*\*使用自定义的HTTP头部，让浏览器与服务器进行沟通，从而决定请求或响应是该成功还是应该失败。\*\*在发送请求时，浏览器自行附加一个Origin头部，包含发出请求页面的原信息（协议、域名和端口），然后服务器根据这个头部信息来决定是否给予响应。

客户端发出`Origin：http://www.abc.com`,如果服务器认为这个请求可以接受，就返回`Access-Control-Allow-Origin:http://www.abc.com`,如果没有该返回头部，或者头部源信息不匹配，浏览器就会驳回请求。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源（请求的url跨域路径是绝对路径），就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

### cors的两种请求 ###

CORS分为简单请求和非简单请求。  
简单请求同时满足以下两大条件：

> 1.请求方式是以下三种方法之一：  
> HEAD ,GET, POST  
> 2.HTTP的头部信息不超出以下几种字段：  
> Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type:只限于三个值，application/x-www-from-urlencoded（表单序列化）、multipart/form-data（上传文件）、text/plain（纯文本的形式，浏览器在获取到这种文件时并不会对其进行处理）

凡是不同时满足上面两个条件，就是非简单请求。浏览器的处理方式不一样。

#### 简单请求 ####

**1.基础信息**  
**简单请求，浏览器直接发出CORS请求。在头信息增加`Origin`字段**  
浏览器简单AJAX跨域请求：

GET /cors HTTP/1.1
    Origin: http://api.bob.com
    Host: api.alice.com(接受请求的域)
    Accept-Language: en-US
    Connection: keep-alive
    User-Agent: Mozilla/5.0...

**服务器根据`Origin`的值来决定是否同意请求。如果`Origin`指定的源，不在许可范围内，服务器会返回一个正常的HTTP响应。浏览器发现，这个回应的头信息没有包含`Access-Control-Allow-Origin`字段，就知道出错了，从而抛出一个错误，被`XMLHttpRequest`的`onerror`回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。如果服务器接受 `Origin`,头部信息会多出几个信息字段。**

Access-Control-Allow-Origin: http://api.bob.com
    Access-Control-Allow-Credentials: true
    Access-Control-Expose-Headers: FooBar
    Content-Type: text/html; charset=utf-8

上面的头信息之中，有三个与CORS请求相关的字段，都以Access-Control-开头。  
（1）`Access-Control-Allow-Origin`  
该字段是必须的。它的值要么是请求时`Origin`字段的值，要么是一个\*，表示接受任意域名的请求。  
（2）`Access-Control-Allow-Credentials`  
该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。  
（3）`Access-Control-Expose-Headers`  
该字段可选。CORS请求时，`XMLHttpRequest`对象的`getResponseHeader()`方法只能拿到6个基本字段：`Cache-Contro`l、`Content-Language`、`Content-Type`、`Expires`、`Last-Modified`、`Pragma`。如果想拿到其他字段，就必须在`Access-Control-Expose-Headers`里面指定。上面的例子指定，`getResponseHeader('FooBar')`可以返回FooBar字段的值。  
**2.withCredentials 属性**  
CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定`Access-Control-Allow-Credentials`字段。

Access-Control-Allow-Credentials:true

另一方面，开发者必须在AJAX请求中打开`withCredentials`属性。

var xhr = new XMLHttpRequest();   xhr.withCredentials = true;

否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。  
但是，如果省略`withCredentials`设置，有的浏览器还是会一起发送Cookie。这时，可以显式关闭`withCredentials`。

xhr.withCredentials = false;

需要注意的是，如果要发送Cookie，`Access-Control-Allow-Origin`就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的`document.cookie`也无法读取服务器域名下的Cookie。

#### 非简单请求 ####

1.预检请求  
非简单请求时对服务器有特殊要求的请求，例如请求方法是，`PUT`(让服务器创建一个文件，文件名是请求的url，文件内容是请求报文的主体)|`DELETE`（删除请求url指定的资源）；或者`Content-Type`字段是`application/json`  
**非简单请求，正式通信之前，增加一次HTTP查询请求，叫做“预检请求”**  
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用那些HTTP动词（请求方法）和头部信息字段。只有得到**肯定**的答复，浏览完才会**正式发出`XMLHttpRequest`请求**，**否则就报错**。  
JS脚本,`PUT`请求，且发送一个自定义头信息`X-Custom-Header`

> var url = 'http://api.alice.com/cors';
    > var xhr = new XMLHttpRequest();
    > xhr.open('PUT', url, true);
    > xhr.setRequestHeader('X-Custom-Header', 'value');
    > xhr.send();

浏览器发现，这是一个非简单请求，就自动发出一个“预检请求”，要求服务器确认允许这样的请求。下面是一个预检请求的头信息。

OPTIONS /cors HTTP/1.1
    Origin: http://api.bob.com
    Access-Control-Request-Method: PUT
    Access-Control-Request-Headers: X-Custom-Header
    Host: api.alice.com
    Accept-Language: en-US
    Connection: keep-alive
    User-Agent: Mozilla/5.0...

\*\*“预检请求”使用的请求方法是`OPTIONS`,表示这个请求是用来询问的。\*\*头信息里面，关键字段是Origin，表示请求来自哪个源。  
除了Origin字段，"预检"请求的头信息包括两个特殊字段。  
（1）`Access-Control-Request-Method`  
该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是`PUT`。  
（2）`Access-Control-Request-Headers`  
该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是`X-Custom-Header`。  
2.预检请求回应  
服务器收到"预检"请求以后，检查了`Origin、Access-Control-Request-Method和Access-Control-Request-Headers`字段以后，确认允许跨源请求，就可以做出回应。

HTTP/1.1 200 OK
    Date: Mon, 01 Dec 2008 01:15:39 GMT
    Server: Apache/2.0.61 (Unix)
    Access-Control-Allow-Origin: http://api.bob.com
    Access-Control-Allow-Methods: GET, POST, PUT
    Access-Control-Allow-Headers: X-Custom-Header
    Content-Type: text/html; charset=utf-8
    Content-Encoding: gzip
    Content-Length: 0
    Keep-Alive: timeout=2, max=100
    Connection: Keep-Alive
    Content-Type: text/plain

上面的HTTP回应中，关键的是`Access-Control-Allow-Origin`字段，表示`http://api.bob.com`可以请求数据。该字段也可以设为星号，表示同意任意跨源请求。  
如果浏览器否定了预检请求，返回一个正常的HTTP回应，但是么有任何CROS相关的头信息字段。这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。  
服务器回应的其他CORS相关字段如下。

Access-Control-Allow-Methods: GET, POST, PUT
    Access-Control-Allow-Headers: X-Custom-Header
    Access-Control-Allow-Credentials: true

（1）`Access-Control-Allow-Methods`  
该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。  
（2）`Access-Control-Allow-Headers`  
如果浏览器请求包括`Access-Control-Request-Headers`字段，则`Access-Control-Allow-Headers`字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。  
（3）`Access-Control-Allow-Credentials`  
该字段与简单请求时的含义相同。  
（4）`Access-Control-Max-Age`  
该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。  
`Access-Control-Max-Age`: 1728000

1.  浏览器的正常请求和回应  
    一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个`Origin`头信息字段。服务器的回应，也都会有一个`Access-Control-Allow-Origin`头信息字段。  
    下面是"预检"请求之后，浏览器的正常CORS请求。

> PUT /cors HTTP/1.1
    > Origin: http://api.bob.com
    > Host: api.alice.com
    > X-Custom-Header: value
    > Accept-Language: en-US
    > Connection: keep-alive
    > User-Agent: Mozilla/5.0...

上面头信息的`Origin`字段是浏览器自动添加的。  
下面是服务器正常的回应。

> Access-Control-Allow-Origin: http://api.bob.com
    > Content-Type: text/html; charset=utf-8

上面头信息中，`Access-Control-Allow-Origin`字段是每次回应都必定包含的。

### Jsonp机制 ###

#### 什么是Jsonp？ ####

**通过创建script元素来使用，让其src属性为一个跨域的URL，在URL后面添加响应后的回调函数，响应的数据以参数的形式传入回调函数**。

## 后端常见的解决方法 ##

### 1.基于filter解决跨域-如果是微服务gateway中加配置类 这样只需要配置一处 ###

@Configuration
    public class GatewayCorsConfiguation { 
    
        @Bean
        public CorsFilter corsFilter(){ 
            // 初始化cors配置对象
            CorsConfiguration configuration = new CorsConfiguration();
            configuration.setAllowCredentials(true); // 允许使用cookie，但是使用cookie是addAllowedOrigin必须是具体的地址，不能是*
    // configuration.addAllowedOrigin("*");
            configuration.addAllowedOrigin("http://manage.leyou.com");
            configuration.addAllowedMethod("*");  //允许的请求方式,get,put,post,delete
            configuration.addAllowedHeader("*");//允许的头信息
    
            //初始化cors的源对象配置
            UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
            corsConfigurationSource.registerCorsConfiguration("/**",configuration);
    
            //3.返回新的CorsFilter.
            return new CorsFilter(corsConfigurationSource);
        }
    }

2.基于拦截器

@Configuration
    public class WebConfig extends WebMvcConfigurerAdapter { 
        @Autowired
        private EnvConfig envConfig;
        @Override
        public void addInterceptors(InterceptorRegistry registry) { 
            registry.addInterceptor(new HandlerInterceptor() { 
                @Override
                public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
                        throws Exception { 
                    boolean isTrue = envConfig.getIsDev();//判断是测试服才需要解决跨域问题
                    if (isTrue) { 
                        response.addHeader("Access-Control-Allow-Origin", "*");
    　　　　　　　　　　   response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
                        response.addHeader("Access-Control-Allow-Headers",
                                "Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,token");
                    }
                    return true;
                }
    
                @Override
                public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
                        ModelAndView modelAndView) throws Exception { 
    
                }
    
                @Override
                public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler,
                        Exception ex) throws Exception { 
                }
            });
        }

### 2.使用注解 ###

@CrossOrigin

#### 单个接口跨域 ####

//单个接口跨域
    @RestController //使用@CrossOrigin 
    @RequestMapping("/account")
    public class AccountController { 
    
        @CrossOrigin
        @GetMapping("/{id}")
        public Account retrieve(@PathVariable Long id) { 
            // ...
        }
    
        @DeleteMapping("/{id}")
        public void remove(@PathVariable Long id) { 
            // ...
        }
    }

#### 整个controller跨域 ####

@CrossOrigin(origins = "http://localhost:8082/index2.html", maxAge = 3600)
    @RestController
    @RequestMapping("/account")
    public class AccountController { 
    
        @GetMapping("/{id}")
        public Account retrieve(@PathVariable Long id) { 
            // ...
        }
    
        @DeleteMapping("/{id}")
        public void remove(@PathVariable Long id) { 
            // ...
        }
    }

## 前端常见的解决方法 ##

### 跨浏览器的CORS实现 ###

所有浏览器都支持简单请求（非预检请求和不带凭据的请求），因此有必要做跨浏览器方案。检测XHR是否支持CORS的最简单方式就是就是检查xhr中是否存在withCredentials属性。再结合XDomainRequest对象（IE10以下）是否存在，就可以兼顾所有浏览器了。

### Jsonp的实现 ###

##原生的跨域请求
    //res响应数据
    function handleResponse(res){
        console.log(res)
    }
    var script=document.createElement('script')
    //handleResponse回调函数
    script.src="http://freegeoip.net/json/?callback=handleResponse";
    document.body.insertBefore(script,document.body.firstChild)
    ##ajax跨域
    $.ajax({
    url:'http://www.nealyang.cn/login',
    type:'GET',
    dataType:'jsonp',//请求方式为jsonp
    jsonpCallback:'callback',
    data:{
    "username":"Nealyang"
    }
    })
    虽然这种方式非常好用，但是一个最大的缺陷是，只能够实现get请求

## nginx解决跨域 ##

现在有两个网站想互相访问接口 在`http://a.a.com:81/A`中想访问 `http://b.b.com:81/B` 那么进行如下配置即可  
　　然后通过访问 `www.my.com/A` 里面即可访问 `www.my.com/B`

server {
            listen       80;
            server_name  www.my.com;
            location /A {
                proxy_pass  http://a.a.com:81/A;
                index  index.html index.htm;
               # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
               add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
               add_header Access-Control-Allow-Credentials true;
            }
            location /B {
                proxy_pass  http://b.b.com:81/B;
                index  index.html index.htm;
            }
        }

如果是两个端口想互相访问接口 在`http://b.b.com:80/Api`中想访问 `http://b.b.com:81/Api` 那么进行如下配置即可  
　　使用nginx转发机制就可以完成跨域问题

server {
            listen       80;
            server_name  b.b.com;
            location /Api {
                proxy_pass  http://b.b.com:81/Api;
                index  index.html index.htm;
            }
        }

[demo][]

[URL]: https://developer.mozilla.org/en-US/docs/Glossary/URL
[demo]: https://download.csdn.net/download/qq_34359363/12803504