跨域问题的三种解决办法

最新推荐文章于 2024-06-17 17:19:34 发布

程序员胡默默

最新推荐文章于 2024-06-17 17:19:34 发布

阅读量2.6k

点赞数

分类专栏：工作遇见的问题文章标签：前端

本文链接：https://blog.csdn.net/weixin_53170971/article/details/129115102

版权

工作遇见的问题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我们平时对于前后端联调的项目，以下的错误是经常常见的，我们查看浏览器报错：

Access to XMLHttpRequest at 'http://localhost:63110/system/dictionary/all' fromorigin 'http://localhost:8601' 
has been blocked by CORS policy: No 'AccessControl-Allow-Origin' header is present on the requested resource.

提示：从http://localhost:8601访问http://localhost:63110/system/dictionary/all被CORS policy阻止，因为没有Access-Control-Allow-Origin 头信息。CORS全称是 cross origin resource share 表示跨域资源共享。

出这个提示的原因是基于浏览器的同源策略，去判断是否跨域请求，同源策略是浏览器的一种安全机制，从一个地址请求另一个地址，如果协议、主机、端口三者则不是跨域，否则就是跨域请求。

比如：

从http://localhost:8601 到 http://localhost:8602 由于端口不同，是跨域。

从http://192.168.101.10:8601 到 http://192.168.101.11:8601 由于主机不同，是跨域。

从http://192.168.101.10:8601 到 https://192.168.101.11:8601 由于协议不同，是跨域。

注意：服务器之间不存在跨域请求。

浏览器判断是跨域请求会在请求头上添加origin，表示这个请求来源哪里。比如：

GET / HTTP/1.1
Origin: http://localhost:8601

服务器收到请求判断这个Origin判断是否允许跨域，如果允许则在响应头中说明允许该来源的跨域请求，如下：

Access-Control-Allow-Origin：http://localhost:8601

如果允许域名来源的跨域请求，则响应如下：

Access-Control-Allow-Origin：*

解决跨域的方法：

1、JSONP

通过script标签的src属性进行跨域请求，如果服务端要响应内容则首先读取请求参数callback的值，callback是一个回调函数的名称，服务端读取callback的值后将响应内容通过调用callback函数的方式告诉请求方。如下图：

2、添加响应头服务端在响应头添加 Access-Control-Allow-Origin：*

3、通过nginx代理跨域由于服务端之间没有跨域，浏览器通过nginx去访问跨域地址。

1）浏览器先访问http://192.168.101.10:8601 nginx提供的地址，进入页面

2）此页面要跨域访问http://192.168.101.11:8601 ，不能直接跨域访问http://www.baidu.com:8601，而是访问nginx的一个同源地址，比如：http://192.168.101.11:8601/api ，通过http://192.168.101.11:8601/api 的代理去访问http://www.baidu.com:8601。

这样就实现了跨域访问。

浏览器到http://192.168.101.11:8601/api 没有跨域

nginx到http://www.baidu.com:8601通过服务端通信，没有跨域。

实现：spring提供了一个CorsFilter类

/* 允许跨域调用的过滤器*/
@Bean
public CorsFilter corsFilter() {
    CorsConfiguration config = new CorsConfiguration();
    //允许白名单域名进行跨域调用
    config.addAllowedOrigin("*");
    //允许跨越发送ie
    cookieconfig.setAllowCredentials(true);
    //放行全部原始头信息
    config.addAllowedHeader("*");
    //允许所有请求方法跨域调用，比如post，Get,多个方法中间用逗号调用
    config.addAllowedMethod("*");
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
}