angular4跨域問題的解決方法--nginx的安裝以及配置
阿新 • • 發佈:2019-01-08
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/