TypeError: "Cannot convert string to ByteString because the character at index 519 has value 8230 which is greater than 255."

Question

I'm currently working in laravel and react js. I've made api end points in laravel for login registration with laravel passport. Now, I've made following route to get user details when api_token is provided.

Route

Route::group(['middleware' => 'auth:api'], function(){
    Route::post('details', 'API\UserController@details');
});

Here is controller,

Controller

/** 
 * details api 
 * 
 * @return \Illuminate\Http\Response 
 */ 
public function details() 
{ 
    $user = Auth::user(); 
    return response()->json(['success' => $user], $this->successStatus); 
} 

React

import React,{Component} from 'react';
import axios from 'axios';

export default class Home extends Component{
    constructor(props){
        super(props);
        this.state = {
            name: '',
            email: '',
        }
    }
    componentDidMount() {
        axios.get(
            '127.0.0.1:8000/api/details/',
            {
                headers: {
                    'Content-Type':'application/x-www-form-urlencoded',
                    'Authorization':'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImNmMTkxMjQ0ZWVhZmJlZjNmMDljM2ExMDc0MzgwZjE2ZGY2MGY3YTAwOGI0ZmQyZjY4OTI2NWJiZWJlNGIzNTU0ZDNhZGM1ZDNhOTk2ODgzIn0.eyJhdWQiOiIzIiwianRpIjoiY2YxOTEyNDRlZWFmYmVmM2YwOWMzYTEwNzQzODBmMTZkZjYwZjdhMDA4YjRmZDJmNjg5MjY1YmJlYmU0YjM1NTRkM2FkYzVkM2E5OTY4ODMiLCJpYXQiOjE1NDU1ODQ4ODYsIm5iZiI6MTU0NTU4NDg4NiwiZXhwIjoxNTc3MTIwODg2LCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.rRgHTChM8n-3r6syYaH9t0KKQLYLki9_jAsg6UUtX5Y3KUznr8IuAQnPKpuy-6jirEtjB6lG5GA6z7vHonp0YH-dWR3VxRfw_69vf6DfV0Z1yVzqitz7h-zsbC4j…BT_roRITEVusZWogUcpgMrvZs-jbVpfb6DpfNE0RA9ID2t_LSK9wlIc7_LeZFgqwPhBr90aUjpWQNnAfPg8l_DiWWAZLWoSRlYswQ9pQkIwyI-QYfTfIXxAKDdnOTLn7u4cLx1a_lj0IrIudlLPAPI3gqeJWzYYD8e3y7TuQtUv3zvb7rzW-AT6dV2RQO-bzd4OZDraRzrRbhc1qmYy1v0o0FkRxKgIagx69iIjwEyH7wwG08tq9OSptRtviGKZk1cu5T9qywDc4fA61_3lEPPACh_hUgdUc7qOnaKk3mU8nfnonSA0NQzfV_nK9PvGG_NzUQVk4Gei3YEqsUBl-JgofIEO310OBL9cgfa7cFjPMaw90o6XcP9c3abZZFHWGhVJPSrzyLidr_rC2RVhX5M7UvNDxS5Rw-bOWpQiYhd69_-Jk3B92gFWbLk4IBRqkaxGhEmV7netaTkFDF_e0f-R7HjUhicDJe6HQKCBFqzsAwSyax7NoFquWxZeJ4EA',
                    'Accept':'application/json'
                }
            }
        ).then(response => {
            this.setState({
                    name: response.success.name,
                    email: response.success.email
                });
        }).catch(error=>{
            console.log(error);

        });
    }

    render(){
        return(
            <div>
                <h4>Name: {this.state.name}</h4>
                <h4>Email: {this.state.email}</h4>
            </div>
        );
    }
}

When I send the request with api_token, I've got following error.

TypeError: "Cannot convert string to ByteString because the character at index 519 has value 8230 which is greater than 255."

setRequestHeader http://localhost:3000/static/js/bundle.js:876:11

forEach http://localhost:3000/static/js/bundle.js:2339:9

dispatchXhrRequest http://localhost:3000/static/js/bundle.js:870:7

xhrAdapter http://localhost:3000/static/js/bundle.js:762:10

dispatchRequest http://localhost:3000/static/js/bundle.js:1375:10

What I'm doing wrong any suggestion/help is appreciated.

Answer 1

I encountered the same error and found out that it was due to the header string containing Unicode characters. In the above example, the Authorization header contains “…”.