浏览器跨域问题
浏览器为了安全,只允许向与当前地址栏同域名、同端口的服务器发送请求。域名不同、端口不同时,都成为跨域。
解决方式:
-
将域名、端口改为相同
前后端都请求Nginx,再由Nginx进行反向代理,如:有 /api 的就代理到后端服务器
-
让服务器告诉浏览器,可以跨域(返回允许跨域的响应头)
后端链路上有一个地方加上响应头就可以解决跨域问题
后端项目访问流程:用户输入网址=>域名解析服务器=>服务器=>Nginx接受请求=>后端项目(如8080端口)
-
网关支持(修改Nginx配置文件)
# 跨域配置 location ^~ /api/ { #反向代理,访问api时把请求转发到本机8080 proxy_pass http://127.0.0.1:8080/api/; add_header 'Access-Control-Allow-Origin' $http_origin; add_header 'Access-Control-Allow-Credentials' 'true'; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers '*'; if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Origin' $http_origin; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain; charset=utf-8'; add_header 'Content-Length' 0; return 204; } }
-
修改后端服务支持跨域(修改后端项目代码)
-
配置@CrossOrigin注解
//在controller文件上配置@CrossOrigin注解 @CrossOrigin(origins = "http://domain.com", maxAge = 3600)
-
添加web全局请求拦截器
@Configuration public class WebMvcConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { // 设置允许跨域的路径 registry.addMapping("/**") // 设置允许跨域请求的域名 // 当Credentials为true时,Origin不能为星号,需为具体的ip地址【如果接口不带cookie, ip无需设成具体ip】 // .allowedOrigins("http://127.0.0.1:808080") .allowedOriginPatterns("*") // 是否允许证书 不再默认开启 .allowCredentials(true) // 设置允许的方法 .allowedMethods("GET", "POST", "OPTIONS", "DELETE", "PUT", "PATCH") // 跨域允许时间 .maxAge(3600); } }
-
-
补充:
前端访问项目的流程:用户输入网址=> 域名解析服务器(把网址解析为IP地址/交给其他的域名解析服务器)=>Nginx接受到请求,找到对应的文件,返回文件给前端=>前端加载文件到浏览器中
后端项目访问流程:用户输入网址=>域名解析服务器=>后端服务器=>Nginx接受请求=>后端项目(如8080端口)