Fatal编程技术网
  • javascript/
  • Javascript 为什么Axios在从React子组件发布时不包括XSRF-TOKEN？

Javascript 为什么Axios在从React子组件发布时不包括XSRF-TOKEN？

javascript reactjs laravel

Javascript 为什么Axios在从React子组件发布时不包括XSRF-TOKEN？,javascript,reactjs,laravel,axios,Javascript,Reactjs,Laravel,Axios,我有一个Laravel 6.x应用程序，我正在开发。Axios发送XSRF-TOKEN头的时间似乎不一致 然后，我在应用程序中有两个页面需要执行axios帖子。其中一个工作正常，另一个-从组件中包含的组件执行实际post- 排除标头并失败 常见的文件是 js/app.js require('./bootstrap'); js/bootstrap.js window.axios = require('axios'); //snip let token = document.head.queryS

我有一个Laravel 6.x应用程序，我正在开发。Axios发送XSRF-TOKEN头的时间似乎不一致

然后，我在应用程序中有两个页面需要执行axios帖子。其中一个工作正常，另一个-从组件中包含的组件执行实际post- 排除标头并失败

常见的文件是

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');
}

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');
}
布局/app.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>

@extends('layouts.reactapp')

@section('reactContainer')
    <div id='orders-create'></div>
@endsection

@section('components')
    <script src="{{ asset('js/components/Orders.js') }}"></script>
@endsection

@extends('layouts.reactapp')

@section('reactContainer')
    <div id='shopify-setting'></div>
@endsection

@section('components')
    <script src="{{ asset('js/components/Setting.js') }}"></script>
@endsection


@产量（'reactContainer'）
@产量（‘成分’）
工作页是 orders/create.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>

@extends('layouts.reactapp')

@section('reactContainer')
    <div id='orders-create'></div>
@endsection

@section('components')
    <script src="{{ asset('js/components/Orders.js') }}"></script>
@endsection

@extends('layouts.reactapp')

@section('reactContainer')
    <div id='shopify-setting'></div>
@endsection

@section('components')
    <script src="{{ asset('js/components/Setting.js') }}"></script>
@endsection

@extends（'layouts.reactapp'））
@节（“容器”）
@端部
@节（“组件”）
@端部
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'));
}

import React，{Component}来自'React'；
从'@shopify/polaris'导入{Page}；
从“react dom”导入react dom；
导出默认类扩展组件{
建造师（道具）{
超级（道具）；
this.onFormSubmit=this.onFormSubmit.bind（this）；
this.handleFileUpload=this.handleFileUpload.bind（this）；
}
render（）{
返回(
);
}
onFormSubmit（）{
this.handleFileUpload（）.then（（响应）=>{/*snip*/}）；
}
handleFileUpload（）{
返回window.axios.post（url、formData、配置）；
}
};
if（document.getElementById（'orders-create'））{
render（，document.getElementById（'orders-create'）；
}
非工作页面为 shopify/settings.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>

@extends('layouts.reactapp')

@section('reactContainer')
    <div id='orders-create'></div>
@endsection

@section('components')
    <script src="{{ asset('js/components/Orders.js') }}"></script>
@endsection

@extends('layouts.reactapp')

@section('reactContainer')
    <div id='shopify-setting'></div>
@endsection

@section('components')
    <script src="{{ asset('js/components/Setting.js') }}"></script>
@endsection

@extends（'layouts.reactapp'））
@节（“容器”）
@端部
@节（“组件”）
@端部
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'));
}

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“./fields/SettingCheckbox.js”导入设置复选框；
导出默认类设置扩展组件{
render（）{
返回(
返回
);
}
}
if（document.getElementById（'shopify-setting'））{
ReactDOM.render（，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*/);
    }
}

从'@shopify/polaris'导入{Button}；
从“React”导入React，{Component}；
导出默认类设置复选框扩展组件{
建造师（道具）{
超级（道具）；
this.updateSetting=this.updateSetting.bind（this）；
}
render（）{
返回(
更新
);
}
更新设置（）{
window.axios.patch（url，formData）.then（/*snip*/）；
}
}
我看不出这两者之间有什么重要区别。无论哪种方式，它都应该是同一个axios对象，为什么它在嵌套组件中的行为会有所不同？

我不知道这是一个多么正确的解决方案，但将axios.withCredentials全局设置最终做到了这一点

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');
}

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');
}
手动设置withCredentials似乎有效
window.axios.patch（url，formData，{withCredentials:true}）