惯性全局标题

Question

我正在尝试将自定义标头 (

Accept-Content-Language

) 与每个请求一起发送。这适用于所有常规 axios 请求，但惯性手动访问不会在标头上出现。

这是我设置标题的代码：

import axios from 'axios';

const lang = localStorage.getItem('vue_i18n_locale');

if (lang) {
  axios.defaults.headers.common['Accept-Content-Language'] = lang;
  axios.defaults.headers.common['Accept-Language'] = lang;
}

window.axios = axios;

只是尝试运行：

$inertia.post('some-route', { some: data })

我知道如何将 header 属性传递给手动访问，但我希望为整个应用程序中的每次访问发送此标头，而不必在任何地方手动添加它们。

有什么办法可以实现这一点吗？我的谷歌搜索告诉我没有，但我希望这里的人会更了解。

Answer 1

希望这篇对你有帮助

import axios from 'axios';
import { InertiaApp } from '@inertiajs/inertia-vue3';

axios.interceptors.request.use((config) => {
  const lang = localStorage.getItem('vue_i18n_locale');
  if (lang) {
    config.headers['Accept-Content-Language'] = lang;
    config.headers['Accept-Language'] = lang;
  }
  return config;
});

const app = document.getElementById('app');

new InertiaApp({
  resolve: (name) => import(`./Pages/${name}.vue`),
  setup({ el, App, props, plugin }) {
    return createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el);
  },
  page: JSON.parse(app.dataset.page),
});

Answer 2

我遇到了同样的问题，基本上你需要从你的项目中卸载 axios 作为 devDependency（它已经通过惯性导入），如here所报告。

我认为您可以安全地删除您的

window.axios = axios;

作业。

使用 Laravel 11.x + Vue 3 + Inertia 进行测试