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.

Dandle

Can you please add your response json – Cyrus

@AaminKhan I've not got json response, just got above error – Dandle

Do you mean you didn't get any response back from 127.0.0.1:8000/api/details/ – Cyrus

@AaminKhan, when i send request from postman it works perfectly but the above error when i send request from axios. I'm sorry, I'm new to react js – Dandle

Also it should be response.data.success.name - usually it is if you not modified the response structure form laravel – Cyrus

@AaminKhan still same error – Dandle

Let us continue this discussion in chat. – Cyrus

@AaminKhan okay – Dandle

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 “…”.

Czar

I upvoted this answer, because I had the same issue. The difference was only that my Authorization header had wrong double-ticks. The problem occured because the auth header was sent via Slack. And I guess that Slack is escaping the original straight " ones to the italic “ ones. @Czar thanks again! – Tancred

Answer 2

I just had this error in SvelteKit when redirecting using throw redirect(302, location) and it turns out the culprit was non-encoded unicode chars in URL searchParams. example: https://example.com/login?afterLogin=/route/with/weird/chars/like-żłć the solution is to encode the search params using encodeURIcomponent function.

Toxophilite

Answer 3

In my case it was because of the existing "..." in the middle of the access token. I was extracting the token through the inspecting request via Firefox which used kind of ... in the middle of that (Most likely because of security). But Chrome doesn't. I extracted Tocken via Chrome and it worked fine. In that case postman simply returned "Error: Invalid character in header content ["Authorization"]"

Blancmange