跨域问题,一次解决(部署线上项目)
前言
每次部署项目都被跨域折磨?无无无无无需再折磨,只需以下三步,包没问题。
一、前端
- 前端转发时,注意发送的url是否为后端实际所在的 IP 及端口号,具体可通过 F12 在 “网络(Network)” 的请求中看到。
- Nginx配置,在前端的 Nginx 配置中加入以下代码
location / {
# 用来防止刷新后404
try_files $uri $uri/index.html /index.html;
}
location /api {
rewrite ^/api/(.*) /$1 break;
# 后台服务地址
proxy_pass http://你的IP地址/api;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
}
二、后端
只需要一个配置
/**
* 全局跨域配置
*
*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
// 覆盖所有请求
registry.addMapping("/**")
// 允许发送 Cookie
.allowCredentials(true)
// 放行哪些域名(必须用 patterns,否则 * 会和 allowCredentials 冲突)
.allowedOriginPatterns("*")
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
.allowedHeaders("*")
.exposedHeaders("*");
}
}
allowCredentials + 允许所有请求 = 无无无无无敌
- 检查你的后端项目是否正常启动了,如果你连启都没启动,谈不上访问
- 比较经典的一个问题,本来跨域了,结果突然抽风不行了,题主遇到过好多次,其中最多的原因就是,后端代码呆在断点那儿了!!!,你需要保证你的代码正常执行
三、服务器防火墙
- 宝塔本身的防火墙,一定要仔细看,自己项目所需要的端口是否开放,比如经典的8080、6739(Redis)、3306(MySQL)
- 同样的道理,你自己的服务器本身,还有一道防火墙,也需要做同样的开放,这一步很多服务器可以省事,直接一次性开放所有端口,但还是不太建议
总结
三步过后,跨域从此为路人