学习笔记：如何解决跨域问题

CORS，跨域资源共享

CORS （ Cross-origin resource sharing ），跨域资源共享。 CORS 其实是浏览器制定的一个规范，浏览器会自动进行 CORS 通信，它的实现主要在服务端，通过一些 HTTP Header 来限制可以访问的域，例如页面 A 需要访问 B 服务器上的数据，如果 B 服务器上声明了允许  A 的域名访问，那么从 A 到 B 的跨 域请求就可以完成。

实现WebMvcConfigurer接口

@Configuration
public class CorsConfig implements WebMvcConfigurer(){

    @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080")
                .allowedMethod("*");
    }
}

添加@CrossOrigin注解

如果项目使用的是 Springboot ，可以在 Controller 类上添加一个 @CrossOrigin(origins ="*") 注解就可 以实现对当前controller 的跨域访问了，当然这个标签也可以加到方法上，或者直接加到入口类上对所 有接口进行跨域处理。注意SpringMVC 的版本要在 4.2 或以上版本才支持 @CrossOrigin 。

nginx反向代理接口跨域

nginx 反向代理跨域原理如下： 首先同源策略是浏览器的安全策略，不是 HTTP 协议的一部分。服务器端

调用 HTTP 接口只是使用 HTTP 协议，不会执行 JS 脚本，不需要同源策略，也就不存在跨越问题。

nginx 反向代理接口跨域实现思路如下：通过 nginx 配置一个代理服务器（域名与 domain1 相同，端口不

同）做跳板机，反向代理访问 domain2 接口，并且可以顺便修改 cookie 中 domain 信息，方便当前域

cookie 写入，实现跨域登录。

这样我们的前端代理只要访问 http: www.domain1.com:81/ * 就可以了。

// 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;
        add_header Access-Control-Allow-Origin http://www.domain1.com;
    }
}

通过jsonp跨域

通常为了减轻 web 服务器的负载，我们把 js 、 css ， img 等静态资源分离到另一台独立域名的服务器上，

在 html 页面中再通过相应的标签从不同域名下加载静态资源，这是浏览器允许的操作，基于此原理，我

们可以通过动态创建 script ，再请求一个带参网址实现跨域通信。