前後端分離，使用nginx解決跨域問題

前端：vue.js+nodejs+webpack

後台：springboot

反向**伺服器：nginx

思想：將前端**打包，讓nginx指向靜態資源，nginx對後台請求進行**。

1、將前端**打包：

npm run build

會生成乙個dist資料夾。包含乙個index.html檔案和乙個static資料夾，路徑以我本地為例：

/users/***/ideaprojects/webtest/dist

/usr/local/etc/nginx目錄下的nginx.conf，在server中新增如下： 

listen80; #原為8080，避免衝突，更改為80

server_name  localhost;
#charset koi8-r;
#access_log  logs/host.access.log  main;
location / 
}# **服務端介面
location /api/

前端傳送請求：http://localhost/test ，vue-router將其重定向為http://localhost/api/demo/1，實際訪問是http://localhost:8080/demo/1。

直接向後台傳送請求：訪問http://localhost/api/demo/1，實際訪問是：http://localhost:8080/demo/1

前後端分離nginx配置，同時解決跨域問題

現在，web開發的前後端分離技術越來越火爆，由於最近的課程設計使用了前後端分離的方案，這裡就來記錄一下前後端分離的專案部署。這裡我們使用的前端框架是react，後台使用ssm提供資料介面。nginx engine x 是乙個高效能的http和反向 伺服器,這裡我們使用nginx來作為前端頁面的靜態伺...

Nginx解決前後端分離專案請求跨域問題

場景介紹 本地有兩個服務，乙個是用於提供介面的後台服務，乙個是呼叫介面的前端服務。介面服務的位址為 http 127.0.0.1 8000。前端服務的位址為 http 127.0.0.1，前端頁面部署在nginx中。1.在本機hosts檔案中新增如下網域名稱對映 127.0.0.1 server.q...

nginx實現前後端分離

參考 路徑 nginx conf nginx.conf2.1 設定前端 位置location 2.2 配置後台請求攔截 後台跳轉 攔截所有前端 以 api 開始的請求 到 後端服務 http localhost 8080 backend project name api location api2....