脚本宝典收集整理的这篇文章主要介绍了【全栈项目上线（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;
    }

脚本宝典总结

以上是脚本宝典为你收集整理的【全栈项目上线（vue+node+mongodb）】06.nodejs服务上线（生产环境前后分离的vue项目中怎么解决跨域问题）全部内容，希望文章能够帮你解决【全栈项目上线（vue+node+mongodb）】06.nodejs服务上线（生产环境前后分离的vue项目中怎么解决跨域问题）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。