无法调用 React JS webpack-dev-server api

Posted 2023-03-08

【中文标题】无法调用 React JS webpack-dev-server api

【英文标题】：React JS webpack-dev-server api cannot be called

【发布时间】：2018-05-06 05:25:15

【问题描述】：

我已经在 React 中构建了我的应用程序，并且在通过 webpack-dev-server 在生产构建中对其进行了测试后，调用 API 的可能性出现了。 我正在通过 AXios 提出请求。

GET请求出现如下错误：

GET http://localhost:8080/api/web/api/get-logged-navbar 404（未找到）

对于 POST 请求，它不会触发操作。

即使我使用正确的请求路径。

我的应用的重要文件夹的结构如下：

public（bundle.js 构建文件，以及其他样式和脚本资源都在这里） src（组件和操作） api（api代码在这里：Yii2）

Webpack 配置：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'public');
var APP_DIR = path.resolve(__dirname, 'src');

var config = 
  entry: APP_DIR,
  output: 
    path: BUILD_DIR,
    filename: 'bundle.js'
  ,
  module: 
    loaders: [
      
        test: /\.jsx?$/,
        include: APP_DIR,
        loader: 'babel-loader',
      ,
      
        test: /\.css$/,
        loaders: ["style-loader","css-loader"]
      ,
    ]
  
;

module.exports = config;

我是否需要设置代理并将 API 放在另一个服务器端口上？

【参考方案1】：

假设你在说我认为你在说的话，那么是的，你可能需要 webpack-dev-server 的 proxy option 来将你的 API 请求转发到你的 Yii2 后端。找出 API 服务器正在侦听的端口，并将 /api 代理到该端口，如该页面上的示例所示。

【参考方案2】：

我构建了一个天气应用程序，它使用 React/Webpack 和 Axios 对 openweather.org 进行 API 调用。我认为不需要代理。您应该调查您传递给 Axios 的 URL。如果无法看到您的代码，就很难提出进一步的建议。

【讨论】：

在开发环境中将 URL 传递给 axios 时，一切正常。只有当我进入生产环境时，才会出现错误。