背景:前端Vue集成到App内部,使用file协议在WebView中加载,使用axios请求数据,JsBridge和原生互动,中间使用 Nginx 负载代理 ,后端是 SpringBoot
跨域遇到的问题:
1. 简单请求、复杂请求
2. iOS 中 WKWebVIew 问题
需要在info.plist 中开启 NSAppTransportSecurity --> NSAllowsArbitraryLoads = True
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
</dict>
</plist>
跨域方式有两种(不能同时启用)
Springboot配置跨域 (推荐)
Springboot 配置跨域的方式有多种:自定义Filter 、SpringMvc内置的CorsFilter、注解(@CrossOrigin)等,我用 SpringMvc内置的CorsFilter 的方式配置(该方式忘记抄的哪个大佬的了😭😭)
import org.springframework.context.annotation.*;
import org.springframework.web.cors.*;
import org.springframework.web.filter.*;
/**
* 跨域配置
*/
@Configuration
public class CorsConfig {
// 当前跨域请求最大有效时长。这里默认30天
private final long MAX_AGE = 30 * 24 * 3600;
private CorsConfiguration initCorsConf() {
CorsConfiguration corsConf = new CorsConfiguration();
corsConf.addAllowedOrigin("*"); // 访问源地址,* 允许所有
corsConf.addAllowedHeader("*"); // 访问源请求头,* 允许所有
corsConf.addAllowedMethod("*"); // 访问源请求方法,* 允许所有
corsConf.setMaxAge(MAX_AGE);
return corsConf;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", initCorsConf()); // 匹配所有的 action
return new CorsFilter(source);
}
}
⚠️注意 Springboot配置了跨域后Nginx就不要配置跨域了,双重配置axios校验 origin 不通过,此时Nginx就是代理负载功能
http {
...
upstream testServer {
server 127.0.0.1:8000;
}
server {
listen 80;
location /test/ {
# 只做代理负载用
proxy_pass http://testServer/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
...
}
}
...
}
Nginx配置跨域
http {
...
upstream testServer {
server 127.0.0.1:8000;
}
server {
listen 80;
location /test/ {
add_header Access-Control-Allow-Credentials true always;
add_header Access-Control-Allow-Methods 'GET,POST,PUT,DELETE,OPTIONS' always;
add_header Access-Control-Allow-Headers $http_access_control_request_headers;
add_header Access-Control-Max-Age 3600;
# 如果后端服务里已经配置了跨域,以下两条配置 一定要 注释掉
add_header Access-Control-Allow-Origin $http_origin always;
if ($request_method = 'OPTIONS') {
# 复杂请求会在请求前先开启一个 OPTIONS 请求,直接返回 200
return 200;
}
proxy_pass http://testServer/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
...
}
}
...
}