我正在开发一个Laravel 6.x应用程序。Axios似乎在发送XSRF-TOKEN标头时不一致。
然后我在应用程序中有两个页面需要做axios帖子。其中一个工作正常，另一个从组件中包含的组件进行实际发布-排除标头并失败。
常见的文件是
js/app.js
require('./bootstrap');
js/bootstrap.js
window.axios = require('axios');
//snip
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
layouts/reactap.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
@yield('reactContainer')
<script src="{{ asset('js/app.js') }}"></script>
@yield('components')
</body>
</html>
工作页面为订单/create.blade.php
@extends('layouts.reactapp')
@section('reactContainer')
<div id='orders-create'></div>
@endsection
@section('components')
<script src="{{ asset('js/components/Orders.js') }}"></script>
@endsection
js/components/Orders.js
import React, { Component } from 'react';
import {Page} from '@shopify/polaris';
import ReactDOM from 'react-dom';
export default class Orders extends Component {
constructor(props) {
super(props);
this.onFormSubmit = this.onFormSubmit.bind(this);
this.handleFileUpload = this.handleFileUpload.bind(this);
}
render() {
return (
<Page
title="Orders"
primaryAction={{
content: 'Submit',
onAction: this.onFormSubmit,
}}
><!-- snip --></Page>
);
}
onFormSubmit() {
this.handleFileUpload().then((response) => { /*snip*/ });
}
handleFileUpload() {
return window.axios.post(url, formData, config);
}
};
if (document.getElementById('orders-create')) {
ReactDOM.render(<Orders />, document.getElementById('orders-create'));
}
非工作页面shopify/settings.slade.php
@extends('layouts.reactapp')
@section('reactContainer')
<div id='shopify-setting'></div>
@endsection
@section('components')
<script src="{{ asset('js/components/Setting.js') }}"></script>
@endsection
js/components/Setting.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SettingCheckbox from './fields/SettingCheckbox.js';
export default class Setting extends Component {
render() {
return (
return <SettingCheckbox
setting={setting}
key={setting.id}
/>
);
}
}
if (document.getElementById('shopify-setting')) {
ReactDOM.render(<Setting />, document.getElementById('shopify-setting'));
}
js/component/SettingCheckbox.js
import { Button } from '@shopify/polaris';
import React, { Component } from 'react';
export default class SettingCheckbox extends Component {
constructor(props) {
super(props);
this.updateSetting = this.updateSetting.bind(this);
}
render() {
return(
<Button onclick={this.updateSetting}>Update</Button>
);
}
updateSetting() {
window.axios.patch(url, formData).then(/*snip*/);
}
}
我看不出这两者之间有任何重大区别。无论哪种方式，它都应该是相同的axios对象，为什么它在嵌套组件中的行为会有所不同？
我不知道这个解决方案有多正确，但通过全局设置axios.withCredentials最终做到了。
js/bootstrap.js
window.axios = require('axios');
window.axios.defaults.withCredentials = true;
//snip
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}