跨域问题，一次解决(部署线上项目)

跨域问题，一次解决(部署线上项目)

---

前言

每次部署项目都被跨域折磨?无无无无无需再折磨，只需以下三步，包没问题。

---

一、前端

1. 前端转发时，注意发送的url是否为后端实际所在的 IP 及端口号，具体可通过 F12 在 “网络(Network)” 的请求中看到。
2. 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 + 允许所有请求 = 无无无无无敌

2. 检查你的后端项目是否正常启动了，如果你连启都没启动，谈不上访问
3. 比较经典的一个问题，本来跨域了，结果突然抽风不行了，题主遇到过好多次，其中最多的原因就是，后端代码呆在断点那儿了!!!，你需要保证你的代码正常执行

---

三、服务器防火墙

1. 宝塔本身的防火墙，一定要仔细看，自己项目所需要的端口是否开放，比如经典的8080、6739(Redis)、3306(MySQL)
2. 同样的道理，你自己的服务器本身，还有一道防火墙，也需要做同样的开放，这一步很多服务器可以省事，直接一次性开放所有端口，但还是不太建议

总结

三步过后，跨域从此为路人