目录
一、产生跨域的原因
二、错误描述
三、HTTP访问控制(CORS)
四、解决方案
1、@CrossOrigin 注解
2、设置头部信息
3、配置拦截器
4、web.xml配置
5、HttpClient 转发请求
6、spring-context.xml配置
五、带token的跨域问题解决方案
一、产生跨域的原因
我们在项目开发中,经常会使用前后端分离的技术,把前端代码和后端代码分别部署到不同的服务器上,这样在数据交互的时候,由于浏览器的同源策略,就会产生跨域问题。
同源策略,它是由Netscape提出的一个著名的安全策略。
现在所有支持JavaScript 的浏览器都会使用这个策略。
所谓同源是指,域名,协议,端口相同。
如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。
同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收。
二、错误描述
Failed to load https://example.com/: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://anfo.pl’ is therefore not allowed access. If an opaque response serves your needs, set the request’smode to ‘no-cors’ to fetch the resource with CORS disabled.
三、HTTP访问控制(CORS)
跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个指定域名上的Web应用被准许访问来自不同源服务器上的指定的资源。
- 简单请求:不会触发 CORS 预检请求(GET、HEAD、POST)
- 预检请求:必须首先使用 OPTIONS 方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求。预检请求“的使用,可以避免跨域请求对服务器的用户数据产生未预期的影响。(PUT、DELETE、CONNECT、OPTIONS、TRACE PATCH)
- HTTP 响应首部字段:Access-Control-Allow-Origin、Access-Control-Expose-Headers、Access-Control-Max-Age、Access-Control-Allow-Credentials、Access-Control-Allow-Methods、Access-Control-Allow-Headers(在下文使用时,再做详细介绍)
- HTTP 请求首部字段:Origin、Access-Control-Request-Method、Access-Control-Request-Headers(在下文使用时,再做详细介绍)
四、解决方案
1、@CrossOrigin 注解
- 适用于jdk 1.8及以上
- @CrossOrigin:允许所有ip跨域访问
- @CrossOrigin(origins=“xxx.xxx.xxx.xxx”):只允许指定ip跨域
直接在Controller类或者方法上添加
@CrossOrigin
@Controller
public class BookController {
//do something...
}
2、设置头部信息
首先要了解一下以下几个名词:
1、 CacheController(http协议的缓存控制),常见的值有:
- no-cache:告诉浏览器、缓存服务器,不管本地副本是否过期,使用资源副本前,一定要到源服务器进行副本有效性校验。
- must-revalidate:告诉浏览器、缓