Simple authorization in react axios error: `Network Error at createError...`

Question

I want to test my app and get data from api. When I'm logged in to the web I check in the network tab, which returns me request url in headers, example: https: // beta.application.com / api / v1 / projects /. Is it possible for me to refer to this url in my app?

In console.log I have error

Failed to load resource: the server responded with a status of 401 (Unauthorized)

Access to https: // beta.application.com / api / v1 / projects / at from origin 'chrome-extension://ccekbkp' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Network Error at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16) at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:87)

Example:

email: john.asd@gmail.com

password: aZdfgHkL12

In local.storage I have access to token Example: `{access_token:" 111111111111111111 "}

Can I copy this token and use it in my app in React?

I'm trying to do it:

  componentDidMount() {
        const token = '111111111111111111'; //token from local.storage 
       /*const hash = Base64.encode(token);
        const Basic = 'Basic ' + hash;*/
        const username= 'john.asd@gmail.com';
        const password= 'aZdfgHkL12'
        const url= "https://beta.application.com/api/v1/projects/";

        axios.get
            axios({
                "url": url,
                "withCredentials": true,
                "method": "GET",
                "headers": {
                    'Authorization': `Bearer ${token}`
                },
                "auth": {
                    username: username,
                    password: password
                }
            })
            .then(response => {
                this.setState({
                    projects: response
                });
            })
            .catch(error => {
                console.log('error');
            })
        }

K41F4r · Answer 1 · 2019-06-24T15:18:00.787

3

Regarding Response to preflight request doesn't pass access control check: It does not have HTTP ok status you might want to check this, seems like a CORS issue. If this is an extension you should add the proper permissions and content_security_policy to your manifest (also might need to white-list your extension server side).

Regarding the token, you should send it to your server in the header, depending on what the server expects:

headers: {
            Authorization: `Bearer ${access_token}`
          }

You can even create a new axios instance to avoid adding it all the time:

axiosInstance = axios.create({
     headers: {
            Authorization: `Bearer ${access_token}`
     }
});

and then use it to make your requests to the sever

edited Jun 24 '19 at 15:18

answered Jun 24 '19 at 15:12

K41F4r

1,443
1
16
36

I add `"permissions": [ "https://*/", "http://*/" ], "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"`; but I have still the same errors – Umbro Jun 24 '19 at 17:49
What are you getting? – K41F4r Jun 24 '19 at 22:11
1

`has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.` – Umbro Jun 24 '19 at 22:35
Should look at this: https://stackoverflow.com/a/19744754/4512646 "If you want to allow credentials then your `Access-Control-Allow-Origin` must not use `*`." on your server – K41F4r Jun 25 '19 at 10:11
1

I had to delete `withCredentials` and `auth` – Umbro Jun 25 '19 at 10:19

score 1 · Accepted Answer · answered Jun 25 '19 at 06:49

Solution:

componentDidMount() {
    const token = '111111111111111111'; //token from local.storage 
    const url= "https://beta.application.com/api/v1/projects";

    axios.get
        axios({
            "url": url,
            "method": "GET",
            "headers": {
                'Authorization': `Bearer ${token}`
            }
        })
        .then(response => {
            this.setState({
                projects: response
            });
        })
        .catch(error => {
            console.log('error');
        })
    }

Simple authorization in react axios error: `Network Error at createError...`

2 Answers2