laradock 中运行后端服务以及 Nuxt 一些问题

Laradock Nuxt 问题

这几天本地搭建开发环境 遇到 Nuxt 的一些问题。下面还原一下步骤,希望有经验的大佬可以帮忙给出解决方案.

编辑本机 host 文件

127.0.0.1  api.ppp.test   # 后端接口地址
127.0.0.1  www.ppp.test   # Nuxt 前端地址

laradock Nginx 配置文件

后端地址

api.ppp.test.conf

server {
    listen 80;
    listen [::]:80;

    server_name api.ppp.test;
    root /var/www/ppp/public;
    index index.php index.html index.htm;

    location / {
         try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        try_files $uri /index.php =404;
        fastcgi_pass php-upstream;
        fastcgi_index index.php;
        fastcgi_buffers 16 16k;
        fastcgi_buffer_size 32k;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        #fixes timeouts
        fastcgi_read_timeout 600;
        include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }

    location /.well-known/acme-challenge/ {
        root /var/www/letsencrypt/;
        log_not_found off;
    }
}

Nuxt 前端

www.ppp.test.conf

server {
    listen 80;
    listen [::]:80;

    server_name www.ppp.test;

    index index.html index.htm;

    location / {
        proxy_redirect                      off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_read_timeout                  1m;
        proxy_connect_timeout               1m;
        proxy_pass                          http://workspace:9999;   # Nuxt 服务
    }
}

构建 Nginx

docker-compose build nginx 

启动 laradock

docker-compose up -d nginx mysql redis

进入 workspace 容器运行 Nuxt 服务

docker-compose exec workspace bash

# 运行 Nuxt 服务 0.0.0.0:9999
npm run dev 

本机宿主机是可以访问到 api.ppp.test 以及 前端 Nuxt www.ppp.test 的。但是 Nuxt 中 请求后端接口 会出现如下错误:

laradock 中运行后端服务以及 Nuxt 一些问题

我把 Nuxt 的启动端口换成 80 端口 会出现以下错误:

laradock 中运行后端服务以及 Nuxt 一些问题

实在是不知道怎么解决了,希望大佬可以帮忙看看。我如果把 后端接口和 Nuxt 部署到本机 laragon 环境项目是正常运行的。唯独在 laradock 中 不行。

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
最佳答案

已解决,axios 添加 如下代码即可

axios.defaults.proxy = { host: 'nginx' };

host 为 nginx 容器

2个月前 评论
讨论数量: 1

已解决,axios 添加 如下代码即可

axios.defaults.proxy = { host: 'nginx' };

host 为 nginx 容器

2个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!