使用 Rails 应用程序和 Vue.js 应用程序设置 Nginx + Passenger

Question

我有一个带 Passenger 的 Nginx 远程服务器，通过 public IP 12.34.56.78 为我的 Rails API 提供服务。

现在，我已经将 Vue.js 应用程序部署到同一主机，并且能够通过输入 IP 地址 12.34.56.78 从浏览器访问该应用程序，但是当我尝试登录时，我得到了错误 CONNECTION REFUSED

这是我的nginx.conf

Rails 应用

server {
    listen       3000;
    server_name  bikeramp.local;

    root /home/deploy/bikeramp/current/public;
    passenger_enabled on;
    rails_env production;
    access_log /var/log/nginx/bikeramp.access.log;
    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

Vue.js 应用

server {
        listen   80 default_server;
        server_name  bikeramp_front.local;

        location / {
            root   /home/jdomanski/bikeramp-front;
            try_files $uri $uri/ /index.html;
        }
    }

我已经确认我的两个应用程序都由 Nginx 提供服务：

netstat -tln

tcp        0      0 127.0.0.1:41382         0.0.0.0:*               LISTEN     
tcp        0      0 0.0.0.0:50022           0.0.0.0:*               LISTEN     
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN     
tcp        0      0 0.0.0.0:3000            0.0.0.0:*               LISTEN

我可以从 IP 地址 12.34.56.78/signin 访问我的 Vue.js 应用程序，但是当我从前端登录表单发出 HTTP 请求时，出现错误

OPTIONS http://localhost:3000/api/users/login net::ERR_CONNECTION_REFUSED

这是我向 API

发出 HTTP 请求的代码

axios.defaults.baseURL = 'http://localhost:3000'

当我通过指向远程 IP 从本地计算机的前端发出请求时，我现在收到错误消息：

XMLHttpRequest cannot load http://54.38.36.242/api/users/login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 405.

如何配置 Nginx 以从我的前端应用程序向生活在由同一 Nginx 服务器服务的同一主机上的后端应用程序发出请求。我的 nginx.conf 文件中可能缺少某些内容。你能帮助我吗？我应该在 Nginx 中启用 CORS 吗？

Answer 1

您从不同的域为前端提供服务，所以，是的，您需要具有宽松 Access-Control-Allow-Origin 的 CORS（* 或您在开发中使用的域）。

编辑：您可以为此使用 NGINX，或 Rails（例如 https://github.com/cyu/rack-cors）

使用 Rails 应用程序和 Vue.js 应用程序设置 Nginx + Passenger

Setup Nginx + Passenger with Rails App and Vue.js app

ruby-on-rails

passenger

nginx

vue.js

Rails 应用

Vue.js 应用