vue3+vite+ruby on rails 设置代理

如何访问后端接口？

开发环境：vite反向代理

请求的是vite提供的server。它做了反向代理：在vite.config.ts里面设置proxy，大体意思如果路径是/api/v1开头就自动转发到后端地址。

server: {
  proxy: {
    "/api/v1": {
      target: "http://113.74.52.212:3000/",
    },
  },
},

生产环境

前端页面在8080，后端接口在3000。两种方法：nginx 代理或者 CORS

1. 后端代理转发：后端设置nginx发现请求路径是/api/v1开头的就转发到3000端口，与vite类似。其中ip是远程服务器容器的name 搜索nginx proxy_pass相关配置

location /api/ { 
                proxy_pass http://mangosteen-prod-1:3000; 
                }

2. CORS 跨域访问：首先前端要在http文件里面 当new Http时加上完整的后端地址（ip+端口） ；再让后端允许8080访问3000配置cors.rb文件

export const http = new Http('http://113.74.52.212:3000/api/v1')

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '113.74.52.212:8080'
    resource '*',
    methods: [:get, :post, :delete, :patch, :options, :head],
    headers: :any,
    expose: ['*', 'Authorization'],
    max_age: 600
  end
end

使用方法二在开发环境下有限制：它也没有允许本地地址可以跨域，因此完全不能访问。如何解决？

1. 用一个变量来判断是否为开发环境，是就直接使用'api/v1'即用vite代理，否则使用完整的后端接口地址即生产环境用CORS。

export const http = new Http(DEBUG ? 'api/v1' : 'http://113.74.52.212:3000/api/v1')

2. 让后端配置cors.rb文件CORS支持任意域名那就都不用vite代理啦

origins {true}