以下操作使用下面項目為案例

https://github.com/itguide/vnshop

## 啟動node服務

克隆好項目后記得把依賴包安裝好

npm i

使用 node 啟動node服務

cd /home/wwwroot/vnshop/servernpm run start

使用pm2方式啟動node 服務

npm i pm2 -gcd /home/wwwroot/vnshop/serverpm2 start ./bin/www

測試

http://vx.itnote.cn:3000/goods/list?sort=1&priceLevel=all&page=1&pageSize=8

如果返回數據，說明node 啟動正常

如果單純訪問3000端口會請求出api數據來

但是在vue項目里面請求，會產生跨域

在本地開發解決跨域問題

后端node服務，啟動后是3000端口,在前臺vue項目中訪問，會產生跨域，在本地開發中我們可以配置代理來解決

下面這個是詳細解決方案
https://segmentfault.com/a/11...

在線上生產環境前后分離的vue項目中怎么解決跨域問題

我們在項目中配置好生產環境和開發環境的訪問api地址

在 src/config/api.config.js
api.config 配置

//判斷是開發模式還是本地模式，其實不需要這么麻煩 直接 const isPro = Object.is(process.env.NODE_ENV, 'production')module.exports = {baseUrl: isPro ? 'http://vx.itnote.cn/api/' : 'api/' }

注意：

http://vx.itnote.cn/api/ 這個地址是你自己的服務，能訪問的服務
每次修改這個配置，需要去編譯 npm run build

如果是線上環境 則會訪問 http://vx.itnote.cn/api/

在Nginx配置里面修改添加反向代理

每次vue項目請求以 /api/開頭的路由自動轉換成 3000端口的服務

nginx 配置 修改

vim vim /usr/local/nginx/conf/vhost/vx.itnote.cn.conf location /api/ {proxy_pass http://127.0.0.1:3000/; # 當訪問v1的時候默認轉發到 3000端口}

整體nginx 配置

server{listen 80;#listen [::]:80;server_name vx.itnote.cn ;index index.html index.htm index.php default.html default.htm default.php;root /home/wwwroot/vnshop/client/dist/;include none.conf;#error_page 404 /404.html;# Deny access to PHP files in specific directory#location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; }include enable-php.conf;location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)${expires 30d;}location /api/ {proxy_pass http://127.0.0.1:3000/; # 當訪問api的時候默認轉發到 3000端口}location ~ .*\.(js|css)?${expires 12h;}location ~ /.well-known {allow all;}location ~ /\.{deny all;}access_log /home/wwwlogs/vx.itnote.cn.log;}

總結

以上是生活随笔為你收集整理的【全栈项目上线（vue+node+mongodb）】06.nodejs服务上线（生产环境前后分离的vue项目中怎么解决跨域问题）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。