跨域解决方案

最新推荐文章于 2024-02-01 15:44:50 发布

枫叶-哈哈

最新推荐文章于 2024-02-01 15:44:50 发布

阅读量2.1k

点赞数

分类专栏： js 学无止境文章标签： http javascript web js

本文链接：https://blog.csdn.net/fangye1/article/details/112986505

版权

学无止境同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

参考文章

前端常见跨域解决方案（全）
我也说说Nginx解决前端跨域问题，正确的Nginx跨域配置（后端Nginx CORS跨域配置、CORS设置，后端允许跨域请求）\

什么是跨域

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源.

常见场景：

 1. 资源跳转： A链接、重定向、表单提交
 2. 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
 3. 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等

浏览器很容易受到XSS、CSFR等攻击，为了安全，浏览器引入了 同源策略/SOP（Same origin policy）

它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

常见跨域场景
在这里插入图片描述

跨域解决方案

跨域资源共享（CORS）
nginx代理跨域
通过jsonp跨域
postMessage跨域（前端消息跨域传递）

1. 跨域资源共享（CORS）

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。

目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

简单请求:只要同时满足以下两大条件，就属于简单请求

（1) 请求方法是以下三种方法之一：HEAD，GET，POST
（2）HTTP的头信息不超出以下几种字段：
	Accept
	Accept-Language
	Content-Language
	Last-Event-ID
	Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

非简单请求：凡是不同时满足上面两个条件，就属于非简单请求。比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（OPTIONS)，之后正式请求。

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

具体代码：服务端设置cors配置。

方法1：添加过滤去CORSFilter

public class CORSFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        // 允许跨域访问的域名：具体域名或*。若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/。'
		response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 
		// 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示
		response.setHeader("Access-Control-Allow-Credentials", "true"); 
		// 指明了实际请求所允许使用的 HTTP 方法，它允许 POST, PUT,GET, OPTIONS, DELETE的外域请求
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT,GET, OPTIONS, DELETE");
        //表明在3600 秒内，不需要再发送预检验请求，可以缓存该结果（一个AJAX请求可能被分成了第一步的OPTION预检测请求和正式请求）
        response.setHeader("Access-Control-Max-Age", "3600");
		// 提示OPTIONS预检时，其指明了实际请求中允许携带的额外首部字段（简单请求的头信息），如token。如没有token则跨域失败
        response.setHeader("Access-Control-Allow-Headers", "Content-Type,token");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

方法2：SpringMVC4提供了非常方便的实现跨域的方法。在requestMapping中使用注解。@CrossOrigin

@RestController
@RequestMapping("user")
@CrossOrigin(origins = "http://www.domain1.com",maxAge = 3600)
public class UserController {

    @GetMapping("{userId}")
    public User findUser(@PathVariable Integer userId){
        //此处省略相应代码
    }
}

@CrossOrigin 属性：

属性	说明	默认值
origins	同Access-Control-Allow-Origin，指明允许跨域访问的域名	*
allowedHeaders	同Access-Control-Allow-Headers，指明了实际请求中允许携带的额外首部字段，如token	*
exposedHeaders	同Access-Control-Expose-Headers，指示相应中哪些报头可以公开，前端拿到一些只能最基本的响应头，Cache-Control、Content-Language、Content-Type等，如果要访问其他头，则需要在此设置	无
methods	同Access-Control-Allow-Methods，指明允许使用的 HTTP 方法	默认与controller的Mapping一直（如GetMapping）
allowCredentials	同 Access-Control-Allow-Credentials，表示是否允许发送Cookie，true 发送，false 否	false
maxAge	同Access-Control-Max-Age，用来指定本次预检请求的有效期，单位为秒	1800

若要带cookie请求，前端也需要设置一下：

1.）原生ajax

	// IE8/9需用window.XDomainRequest兼容
	var xhr = new XMLHttpRequest(); 
	// 前端设置是否带cookie
	xhr.withCredentials = true;

2.）jQuery ajax

$.ajax({
    ...
   xhrFields: {
   		// 前端设置是否带cookie
		withCredentials: true    
   },
   // 会让请求头中包含跨域的额外信息，但不会含cookie
   crossDomain: true,   
    ...
});

3.）vue框架

a.) axios设置：

axios.defaults.withCredentials = true

b.) vue-resource设置

Vue.http.options.credentials = true

2. nginx代理跨域

原理同上【跨域资源共享（CORS）】，nginx配置如下：

location / {
	# add_header 给reponse添加头信息
	add_header 'Access-Control-Allow-Origin' $http_origin;
	# 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名
	add_header 'Access-Control-Allow-Credentials' 'true';
	add_header 'Access-Control-Allow-Methods' 'GET, POST,PUT,DELETE, OPTIONS';
	add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
	add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
	if ($request_method = 'OPTIONS') {
		add_header 'Access-Control-Max-Age' 1728000;
		add_header 'Content-Type' 'text/plain; charset=utf-8';
		add_header 'Content-Length' 0;
		# 204等同于请求执行成功，但是没有数据，浏览器不用刷新页面.也不用导向新的页面
		return 204;
	}
}

3. 通过jsonp跨域

script标签的src还是img标签的src，或者说link标签的href他们没有被同源策略所限制。jsonp就是使用同源策略这一“漏洞”，实现的跨域请求（这也是jsonp跨域只能用get请求的原因所在）

前端实现-原生实现：

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>

jquery ajax：

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

vue.js：

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

后端实现：

public void writeJsonp(HttpServletResponse response, Object data) {
    try {
        response.setContentType("text/html");
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setDateHeader("Expires", 0);

        PrintWriter out = response.getWriter();
        out.println("handleCallback" + "(" + JSON.toJSONString(data) + ")");
        out.flush();
        out.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

4. postMessage跨域（前端消息跨域传递）

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一。

postMessage(data,origin)
	data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
	origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

1.）a.html：(http://www.domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向domain2传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
    };

    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
        alert('data from domain2 ---> ' + e.data);
    }, false);
</script>

2.）b.html：(http://www.domain2.com/b.html)

<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---> ' + e.data);

        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;
            // 处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
</script>

枫叶-哈哈

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
跨域解决方案

参考文章前端常见跨域解决方案（全）什么是跨域跨域是指一个域下的文档或脚本试图去请求另一个域下的资源.常见场景：资源跳转： A链接、重定向、表单提交资源嵌入：、浏览器很容易受到XSS、CSFR等攻击，为了安全，浏览器引入了同源策略/SOP（Same origin policy）它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。...
复制链接

扫一扫