Nginx 跨域配置与解释
跨域问题出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。
CORS 是跨域资源分享(Cross-Origin Resource Sharing)的缩写。它是 W3C 标准,属于跨源 AJAX 请求的根本解决方法。
1 两种跨域解决方法
当web项目仅部署在Tomcat等服务器时,我们可以添加Java跨域配置;假设项目采用了Nginx,跨域任务可以交给Nginx。
1.1 Nginx跨域配置
完整的Nginx跨域配置示例
server {
listen 3002;
server_name localhost;
location /hello {
# 指定允许跨域的方法,*代表所有,也可设置具体方法。
add_header Access-Control-Allow-Methods $http_access_control_request_method;
# 预检命令的缓存,如果不缓存每次会发送两次请求
add_header Access-Control-Max-Age 3600;
# 带cookie请求需要加上这个字段,并设置为true
add_header Access-Control-Allow-Credentials true;
# 表示允许这个域跨域调用(客户端发送请求的域名和端口)
# $http_origin动态获取请求客户端请求的域 不用*的原因是带cookie的请求不支持*号
add_header Access-Control-Allow-Origin $http_origin;
# 表示请求头的字段 动态获取
add_header Access-Control-Allow-Headers $http_access_control_request_headers;
# OPTIONS预检命令,预检命令通过时才发送请求
# 检查请求的类型是不是预检命令
if ($request_method = OPTIONS){
return 200;
}
}
}
1.2 SpringBoot 跨域配置注册
原理与nignx相同,修改请求信息。 本类作为一个bean装载到spring容器中。
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter() {
// Cors配置
CorsConfiguration config = new CorsConfiguration();
// 1. 设置请求域名
config.addAllowedOrigin("http://localhost:8080"); // 本地ip
config.addAllowedOrigin("http://192.168.233.130:8080"); // 虚拟机
config.addAllowedOrigin("http://49.232.170.99"); // 外网ip
config.addAllowedOrigin("*"); // 任意
// 2. 设置允许的header
config.addAllowedHeader("*");
// 3. 设置允许请求的方法
config.addAllowedMethod("*");
// 4. 设置是否发送cookie
config.setAllowCredentials(true);
// 为URL添加路由
UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
corsSource.registerCorsConfiguration("/**", config);
return new CorsFilter(corsSource);
}
}
版权声明:本文为博主原创文章,未经博主允许不得转载。