Rumah >hujung hadapan web >tutorial js >跨域问题的超详细全解（附示例）

跨域问题的超详细全解（附示例）

不言ke hadapan: 2019-01-14 10:05:472602semak imbas

本篇文章给大家带来的内容是关于跨域问题的超详细全解（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

跨域，老生常谈的问题

简述

作为一只前端菜鸟，跨域方面只懂得JSONP和CORS，并未曾深入了解。但随着春招越来越近，就算是菜鸟也要猛振翅膀。近几日仔细研究了跨域问题，写下这篇文章，希望对开发者们有所帮助。在读本文前，希望您对以下知识略有了解。

浏览器同源策略

nodejs

iframe

docker, nginx

我们为何要研究跨域问题

因为浏览器的同源策略规定某域下的客户端在没明确授权的情况下，不能读写另一个域的资源。而在实际开发中，前后端常常是相互分离的，并且前后端的项目部署也常常不在一个服务器内或者在一个服务器的不同端口下。前端想要获取后端的数据，就必须发起请求，如果不错一些处理，就会受到浏览器同源策略的约束。后端可以收到请求并返回数据，但是前端无法收到数据。

多种跨域方法

跨域可以大概分为两种目的

前后端分离时，前端为了获取后端数据而跨域

为不同域下的前端页面通信而跨域

为前后端分离而跨域

Cross Origin Resource Share (CORS)

CORS是一个跨域资源共享方案，为了解决跨域问题，通过增加一系列请求头和响应头，规范安全地进行跨站数据传输

请求头主要包括

请求头	解释
Origin	Origin头在跨域请求或预先请求中，标明发起跨域请求的源域名。
Access-Control-Request-Method	Access-Control-Request-Method头用于表明跨域请求使用的实际HTTP方法
Access-Control-Request-Headers	Access-Control-Request-Headers用于在预先请求时，告知服务器要发起的跨域请求中会携带的请求头信息

响应头主要包括

响应头	解释
Access-Control-Allow-Origin	Access-Control-Allow-Origin头中携带了服务器端验证后的允许的跨域请求域名，可以是一个具体的域名或是一个*（表示任意域名）。
Access-Control-Expose-Headers	Access-Control-Expose-Headers头用于允许返回给跨域请求的响应头列表，在列表中的响应头的内容，才可以被浏览器访问。
Access-Control-Max-Age	Access-Control-Max-Age用于告知浏览器可以将预先检查请求返回结果缓存的时间，在缓存有效期内，浏览器会使用缓存的预先检查结果判断是否发送跨域请求。
Access-Control-Allow-Methods	Access-Control-Allow-Methods用于告知浏览器可以在实际发送跨域请求时，可以支持的请求方法，可以是一个具体的方法列表或是一个*（表示任意方法）。

如何使用

客户端只需按规范设置请求头。
服务端按规范识别并返回对应响应头，或者安装相应插件，修改相应框架配置文件等。具体视服务端所用的语言和框架而定

SpringBoot 设置CORS例子

一个spring boot项目中关于CORS配置的一段代码

HttpServletResponse httpServletResponse = (HttpServletResponse) response;
        String temp = request.getHeader("Origin");
        httpServletResponse.setHeader("Access-Control-Allow-Origin", temp);
        // 允许的访问方法
        httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");
//         Access-Control-Max-Age 用于 CORS 相关配置的缓存
        httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
        httpServletResponse.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept,token");
        httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");

JSONP 跨域

jsonp的原理就是借助HTML中的