【全栈项目上线(vue+node+mongodb)】06.nodejs服务上线(生产环境前后分离的vue项目中怎么解决跨域问题)

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

以下操作使用下面项目为案例

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项目里面请求,会产生跨域

clipboard.png

在本地开发解决跨域问题

后端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/

clipboard.png

在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;
    }
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看