用Nginx代理请求，处理前后端跨域

Posted 2022-03-12 hanshuai

　　自从前端spa框架出现后，都是前后端分离开发了。我们在开发的时候难免会遇到跨域的问题。跨域这种问题解决的方法基本都是在服务端实现的。以java为例，我知道的有3种方法处理跨域：

　　1.使用 @CrossOrigin 注解对每一个接口进行跨域处理,缺点是比较麻烦

@CrossOrigin(origins ="*")
@RequestMapping(value = "/test", method = RequestMethod.GET)
public String test() 
    return "test";

　　2.使用 @CrossOrigin 在入口类对所有接口进行跨域处理

@CrossOrigin(origins = "*")
@RestController
@SpringBootApplication
public class SpringBootCorsTestApplication 
    // ***

　　3.还可以添加一个配置类，对所有的接口进行跨域处理

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter 

    @Override
    public void addCorsMappings(CorsRegistry registry) 
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
                .allowCredentials(true);
    

　　但是...我们项目组的后端他们不在代码中处理跨域，通过线上的nginx统一配置跨域处理...我们前端用的vue，vue配置中是有对于开发跨域的处理，由于我们项目的特殊性，并不适合我们（我们一套代码会运行会部署在不同的服务器，至少3套，前后端代码有差异，我们通过gitlab分支解决代理管理，我们将差异抽离出来成为不同版本代码的配置，例如不同的后台api接口地址，刚开始我们前端代码在构建的时候将配置打进去，发现这样还是代码和配置傻傻分不清楚，这样子处理的不是很好，我们为了前端代码和配置的彻底分离，将代码和配置分别建立两个gitlab仓库，前端项目构建的时候只是构建代码，配置会在部署的时候通过脚本对特定环境进行替换，我感觉跟猴子补丁有点类似，以此来达到跟后台java一样一套代码，运行时用不同命令读取不同的配置运行）本着自己散装的nignx配置了解，可以通过本地nginx做一个请求代理转发，然后在nginx中处理跨域

server 
    listen 9090;
    server_name localhost;

    location /
        add_header ‘Access-Control-Allow-Origin‘ $http_origin;
        add_header ‘Access-Control-Allow-Methods‘ ‘GET, POST, OPTIONS‘;
        add_header ‘Access-Control-Allow-Headers‘ ‘*‘;


        if ($request_method = "OPTIONS") 
            add_header ‘Access-Control-Allow-Origin‘ $http_origin;
            add_header ‘Access-Control-Allow-Methods‘ ‘GET, POST, OPTIONS‘;
            add_header ‘Access-Control-Allow-Headers‘ ‘*‘;
            add_header ‘Content-Length‘ 0;
            add_header ‘Content-Type‘ ‘text/plain, charset=utf-8‘;
            return 204;
        

        proxy_pass http://192.168.0.3:9999;
    
    
    #location /aepreservation 
    #
    #    add_header ‘Access-Control-Allow-Origin‘ $http_origin;
    #    add_header ‘Access-Control-Allow-Methods‘ ‘GET, POST, OPTIONS‘;
    #    add_header ‘Access-Control-Allow-Headers‘ ‘*‘;

    #    if ($request_method = "OPTIONS") 
    #        add_header ‘Access-Control-Allow-Origin‘ $http_origin;
    #        add_header ‘Access-Control-Allow-Methods‘ ‘GET, POST, OPTIONS‘;
    #        add_header ‘Access-Control-Allow-Headers‘ ‘*‘;
    #        add_header ‘Content-Length‘ 0;
    #        add_header ‘Content-Type‘ ‘text/plain, charset=utf-8‘;
    #        return 204;
    #    
    
    #   proxy_http_version 1.1;
    #   proxy_set_header Upgrade $http_upgrade;
    #   proxy_set_header Connection "upgrade";
    #    proxy_pass http://192.168.0.3:9999;
   #

　　nginx监听本地端口9090的所有端口，并转发到对应的后端服务(假如你们后台服务的地址为 http://192.168.0.3:9999/api/*，我们的前端代理只要访问 http:localhost:9090/api/*就可以了，注意下方我注释的地方是代理websocket的方法，路径是/aepreservation，我当时为了偷懒（正则看着头疼），抄了一份上边的配置，ningx是可以通过正则判断的，只对确定的websocket路径进行处理，不用向我一样写的这么啰嗦