浅谈前端处理跨域的几种方法_前端如何解决跨域问题

什么是跨域

广义的理解：跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。
狭义的理解：是由浏览器同源策略限制的一类请求场景。

我们这里重点从狭义上去寻找几种常用的跨域解决方法。

同源策略

同源策略（SOP）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同。

举一些简单的栗子吧：

http:www.baidu.com
https:www.baidu.com
非同源，因为协议不同
1
2
3

http://www.baidu1.com/a.js
http://www.baidu2.com/b.js 
非同源，因为域名不同
1
2
3

http://www.baidu.com:8000/a.js
http://www.baidu.com/b.js  
非同源，因为端口不同
1
2
3

http://www.baidu.com/a.js
http://www.baidu.com/b.js   
http://www.baidu.com/test/c.js
同源
1
2
3
4

属于同源策略的才可以互相通信，否则需要做一些处理后才可以互换“资源”。

解决方法

1.使用jsonp解决跨域

原理：跨域访问的只限制xhr类型的请求，所以js中就利用了这一特点，让服务端不在返回的是一个JSON格式的数据，而是返回一段JS代码，将JSON的数据以参数的形式传递到这个函数中，而函数的名称就是callback参数的值。

实现：

// 处理跨域之前 AJAX正常的发送请求：
$("#demo1").click(function(){
    $.ajax({
        url : 'http://www.tpadmin.top/Index/Test/crossDomain',
        data : {},
        type : 'get',
        success : function (res) {
            //No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1' is therefore not allowed access. 在执行时候报出的错误，这代表了跨域错误
            alert(res);
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12

// 处理跨域  使用jsonp
$("#demo2").click(function(){
    $.ajax({
        url : 'http://www.tpadmin.top/Index/Test/crossDomain',
        data : {},
        type : 'get',
        dataType : 'jsonp', 
        success : function (res) {
            alert(res);
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12

缺点：

1. JSONP只支持GET请求，对POST请求不友好。
2. 它只支持跨域HTTP请求。

2.使用CORS解决跨域

CORS是一个W3C标准，全称是"跨域资源共享"。它允许浏览器向跨源服务器发出XMLHttpRequest请求。

此外，CORS需要浏览器和服务端同时支持，除了IE浏览器10版本以下的其他浏览器都已经支持，服务端和AJAX的原理类似，只需要在响应头里增加一些条件即可，一般通过过滤器完成。

原理：浏览器会将ajax请求分为两类，其处理方案略有差异：简单请求、特殊请求。

（1）简单请求：需要满足两个条件。

1. 请求方法为POST GET HEAD三种的其中之一。
2. 请求头中不存在自定义头，即只包含以下几个字段：
   Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type( 值为 application/x-www-form-urlencoded、multipart/form-data、text/plain 其中之一 ）

当浏览器发现发现的ajax请求是简单请求时，会在请求头中携带一个字段：Origin.

Origin中会指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域。

如果服务器允许跨域，需要在返回的响应头中携带下面信息：

Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Content-Type: text/html; charset=utf-8
1
2
3

Access-Control-Allow-Origin：可接受的域，是一个具体域名或者*，代表任意；
Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true。

如果跨域请求要想操作cookie，需要满足3个条件：

• 服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。
• 浏览器发起ajax需要指定withCredentials 为true
• 响应头中的Access-Control-Allow-Origin一定不能为*，必须是指定的域名

（2）复杂请求：

如果不符合简单请求的要求，则判断为复杂请求，例如请求方式为PUT，会在正式通信之前进行一次HTTP查询请求，称为“预检请求”。

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

// 复杂请求的请求头举例：
OPTIONS /cors HTTP/1.1
Origin: http://manage.leyou.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.leyou.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
1
2
3
4
5
6
7
8
9

服务器接收到“预检请求”，如果允许跨域，则会发出响应：

// 复杂请求 允许跨域 的请求头举例：
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://manage.leyou.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 1728000
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

除了Access-Control-Allow-Origin和Access-Control-Allow-Credentials以外，这里又额外多出3个头：

• Access-Control-Allow-Methods：允许访问的方式
• Access-Control-Allow-Headers：允许携带的头
• Access-Control-Max-Age：本次许可的有效时长，单位是秒，过期之前的 ajax请求就无需再次进行预检了

如果浏览器得到上述响应，则认定为可以跨域，后续就跟简单请求的处理是一样的了。

实现：浏览器端已经实现了跨域，而在服务器端是通过统一拦截器实现的。

SpringMVC已经帮我们写好了CORS的跨域过滤器：CorsFilter ,内部已经实现了刚才所讲的判定逻辑，我们直接用就好了。

在Application下编写一个配置类，并且注册CorsFilter：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写*，否则cookie就无法使用了
        config.addAllowedOrigin("http://manage.leyou.com");
        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        // 4）允许的头信息
        config.addAllowedHeader("*");

        //2.添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

3.nginx反向代理接口跨域

原理：同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。

实现：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。

nginx具体配置：

#proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;

    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

前端代码 举例：

var xhr = new XMLHttpRequest();

// 前端开关：浏览器是否读写cookie
xhr.withCredentials = true;

// 访问nginx中的代理服务器
xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();
1
2
3
4
5
6
7
8

Node.js后台举例

var http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
    var params = qs.parse(req.url.substring(2));

    // 向前台写cookie
    res.writeHead(200, {
        'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本无法读取
    });

    res.write(JSON.stringify(params));
    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4.vue解决跨域
利用node + webpack + webpack-dev-server代理接口跨域。在开发环境下，由于vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域，无须设置headers跨域信息了。

webpack.config.js 的配置:

module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
            changeOrigin: true,
            secure: false,  // 当代理某些https服务报错时用
            cookieDomainRewrite: 'www.domain1.com'  // 可以为false，表示不修改
        }],
        noInfo: true
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16