1. 程式人生 > >angular4跨域問題的解決方法--nginx的安裝以及配置

angular4跨域問題的解決方法--nginx的安裝以及配置

1.  官網下載地址:https://nginx.org/en/download.html,如圖所示

2.  下載完成後把壓縮包解壓到本地電腦的相應資料夾下,不用安裝,解壓目錄如下:

     

3. 啟動nginx命令:開啟電腦執行介面 cmd,進入到nginx的位置,執行nginx.exe即可

     

     如果想要停止,輸入命令nginx -s stop即可

4. 開啟瀏覽器http://localhost,如果出現以下頁面,表示nginx啟動成功

   

5.配置nginx進行跨域的訪問

   開啟nginx下的conf中的nginx.conf檔案進行配置

   

6. 配置nginx.conf檔案,配置如下

7. 配置完成,檢視是否配置成功,cmd進入到nginx目錄下,輸入nginx -t,如果出現以下頁面即配置成功:

    

8. 訪問頁面從開始的localhost:4200變成伺服器的地址:8083/專案名稱

 server {
        listen       8083;
       

		location ~ ^/dm {
			proxy_pass http://伺服器的ip地址:8080;
		}
			
		
			
			
		location ~ ^/sockjs-node {
			proxy_pass http://127.0.0.1:4200;
			proxy_http_version 1.1;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection "upgrade";
		}
        location / {
            root   html;
            index  index.html index.htm;
        }
	}



 server {
       listen       10360;
       server_name  localhost;
       add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, 
                   Accept";
       add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";  
       location / {
        
          proxy_pass http://伺服器的ip地址:8092/;
        

      
       }
	
    }

9. 把專案打包放到伺服器的html中

    

 10. 訪問url:http://伺服器的ip地址:8083/專案打包名稱

 11. 專案總對應的介面應該是介面的url+:10360/