【全棧項目上線（vue+node+mongodb）】06.nodejs服務上線（生產環境先後分離的vue項目中怎麼解決跨域問題）

如下操做使用下面項目爲案例

https://github.com/itguide/vnshop

## 啓動node服務

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

npm i

使用 node 啓動node服務

cd /home/wwwroot/vnshop/server

npm run start

使用pm2方式啓動node 服務

npm i pm2 -g

cd /home/wwwroot/vnshop/server

pm2 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;
    }