Laravel+React项目中路由Slug引发Axios请求路径错误的解决咨询

这是个非常典型的相对路径与绝对路径混淆导致的问题，我给你几个实用的解决方案，按推荐程度排序：

1. 直接使用根路径开头的请求URL #

这是最简单直接的修复方式，只要给你的axios请求URL加上开头的斜杠/，就能强制请求从网站根目录发起，不管当前页面处于哪个子路由下。

修改你的NavBar.js里的请求代码：

componentDidMount() {
  // 把 'category' 改成 '/category'
  axios.get('/category')
    .then((response) => {
      this.setState({ category: response.data });
    })
    .catch((error) => {
      // console.log(error);
    });
}
toggleDrawer() {
  this.setState({ show: true });
  // 把 'cart' 改成 '/cart'
  axios.get('/cart')
    .then((response) => {
      this.setState({
        cart: Object.values(response.data.content),
        counter: response.data.counter,
      });
    });
}

这样不管你在/product/2还是/category/3页面，请求都会正确指向http://localhost:8000/category和http://localhost:8000/cart。

2. 全局配置axios的baseURL #

如果你的项目里有很多axios请求，不想每次都手动加根路径，可以全局配置axios的基础URL。

在你的React项目入口文件（比如index.js）里添加：

import axios from 'axios';
// 设置基础URL为项目根目录
axios.defaults.baseURL = 'http://localhost:8000/';
// 生产环境可以用环境变量，比如：
// axios.defaults.baseURL = process.env.REACT_APP_API_BASE_URL;

之后所有axios请求都会自动拼接这个baseURL，你依然可以写axios.get('category')，它会自动解析成正确的根路径请求。

3. 利用Laravel路由命名生成绝对URL（适合混合开发场景） #

如果你的React组件是嵌入在Laravel Blade模板中的，可以借助Laravel的路由命名功能，动态生成绝对URL并注入到前端。

首先给你的Laravel路由命名：

// web.php
Route::get('category', 'CartController@returnCategory')->name('category');
Route::get('cart','CartController@getCart')->name('cart');

然后在你的Blade模板（比如welcome.blade.php）里注入全局变量：

<script>
window.appRoutes = {
    category: "{{ route('category') }}",
    cart: "{{ route('cart') }}"
};
</script>

最后在React组件里使用这个全局变量：

axios.get(window.appRoutes.category)

这种方式的好处是，当你部署到不同域名的服务器时，不需要修改React代码，Laravel会自动生成正确的URL。

内容的提问来源于stack exchange，提问作者HardRock