用Nginx代理請求，處理前后端跨域

　　自從前端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路徑進行處理，不用向我一樣寫的這么啰嗦