reactjs 如何配置vite.config以在不同的端口代理服务器

kpbpu008  于 2023-03-29  发布在  React
关注(0)|答案(1)|浏览(309)

我正在尝试使用Vite应用程序(localhost:5173)从Flask服务器(localhost:5000)获取数据。我所有的API端点都在Postman中工作。我遵循了Vite文档中的说明,但是,我一定错过了一些东西,因为获取仍然向localhost:5173发送请求。
下面是vite.config.ts:

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:5000",
        changeOrigin: true,
        secure: false,
        ws: true,
        configure: (proxy, _options) => {
          proxy.on('error', (err, _req, _res) => {
            console.log('proxy error', err);
          });
          proxy.on('proxyReq', (proxyReq, req, _res) => {
            console.log('Sending Request to the Target:', req.method, req.url);
          });
          proxy.on('proxyRes', (proxyRes, req, _res) => {
            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
          });
        }
      },
    }
  }
})

下面是vite.config中错误处理的客户端控制台输出:

Sending Request to the Target: GET /api/home/
Received Response from the Target: 200 /api/home/

这是我的fetch:

fetch('/api/home')
      .then((res) => console.log(res))
    // .then((res) => res.json())
    // .then((data: object[]) => {
    //   setPostData(data)
    // })

这是上面console.log的输出(困惑为什么提取仍然命中localhost:5173端点):

type: 'basic', 
url: 'http://localhost:5173/api/home/', 
redirected: true, 
status: 200,  ok: true, …

这是一些数据,正如它在Postman中所回应的那样:

[{
        "comments": [],
        "created_at": "Thu, 23 Mar 2023 08:30:17 GMT",
        "likes": 2,
        "text": "Lorem ipsum",
        "title": "Morbi non quam nec dui luctus rutrum",
        "updated_at": "Thu, 23 Mar 2023 08:30:17 GMT",
        "user": "alesmonde0",
        "user_id": 1
    }]

我是Flask的新手,TypeScript的新手,但是有使用Express和Node的React/Vite的经验。我错过了一些简单的东西吗?
我试过:

  • 根据Vite上的文档
  • 将vite.config中的server.proxy路径更改为'/' -这只服务于我的Flask应用程序,没有Vite
  • secure: false添加到vite.config(我在类似问题上找到的一个解决方案)中,但没有成功
  • ws: true添加到vite.config -我在这里找到的另一个解决方案-不起作用
  • 将server.proxy url从“/API”更改为“/”-这为我的Flask应用程序提供了服务,我无法看到我的Vite前端
  • 添加Access-Control-Allow-Origin头到我的fetch -这没有任何作用
  • 添加server.proxy.configure选项以尝试查找错误-这令人困惑地返回200 -我希望是400
xlpyo6sf

xlpyo6sf1#

我能够通过使用Axios解决这个问题。这只需要配置Axios模块本身,而不是必须配置Vite.config文件。
取入React组分:

import axios from 'axios';

async function fetch() {
      const res = await axios.get('http://127.0.0.1:5000/', {
        headers: { 'Content-Type': 'application/json' }
      });
      setPostData(res.data);
    }

我还必须在服务器端实现flask-CORS,以避免'Access-Control-Allow-Origin'错误:
app.py:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

相关问题