跨域Access-Control-Allow-Origin解决方案

最新推荐文章于 2025-08-01 16:02:25 发布

原创

最新推荐文章于 2025-08-01 16:02:25 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了浏览器的同源策略及其安全原因，分析了跨域访问时遇到的问题，并提供了多种解决跨域的方法，包括后端修改Response设置`Access-Control-Allow-Origin`、SpringBoot配置跨域支持以及JSONP的原理与实现。同时，文中还探讨了JSONP的局限性和其他如Nginx反向代理、后端代理等跨域解决方案。

前端访问其它域名的资源往往会失败，那是因为浏览器出于安全考虑禁止了不同源的资源。

同源策略

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

同源：协议 + 域名 + 端口

既然是浏览器的策略，则说明资源请求是可以正常返回的，只是浏览器不给用。

跨域报错

本地启动了一个web服务，地址为 127.0.0.1:8882 ，然后通过一个本地静态页面去请求这个接口。虽然在同一台电脑，但依然是跨域的。

640?wx_fmt=png

上面也说了这个限制是浏览器做的，看看接口，其实已经请求成功了，后端是执行了相关代码的。

640?wx_fmt=png

后端修改Response支持跨域

从上面控制台的输出可以看到，错误原因是请求的资源（接口）的header中没有”Access-Control-Allow-Origin“，那我们可以给它加上。在哪加？既然说是请求的资源没有，那当然是在请求的资源上加，也就是服务端。

@SpringBootApplication	
@Configuration	
@RestController	
public class ApplicationA {	
    public static void main(String[] args) {	
        SpringApplication.run(ApplicationA.class, args);	
    }	
    @RequestMapping("/test")	
    public Object test(HttpServletRequest request, HttpServletResponse response) {	
        // 跨域支持	
        response.setHeader("Access-Control-Allow-Origin", "*");	
        response.setHeader("Access-Control-Allow-Methods", "POST,GET,PUT,DELETE");	
        response.setHeader("Access-Control-Max-Age", "3600");	
        response.setHeader("Access-Control-Allow-Headers", "*");	
        response.setHeader("Access-Control-Allow-Credentials", "true");	
        Map&lt;String, Object&gt; map = new HashMap&lt;&gt;();	
        m