{"id":2468,"date":"2023-02-20T14:53:41","date_gmt":"2023-02-20T14:53:41","guid":{"rendered":"https:\/\/codeinsightacademy.com\/blog\/?p=2468"},"modified":"2023-02-21T16:06:14","modified_gmt":"2023-02-21T16:06:14","slug":"interceptor","status":"publish","type":"post","link":"https:\/\/codeinsightacademy.com\/blog\/react\/interceptor\/","title":{"rendered":"Interceptor"},"content":{"rendered":"\n<p>index.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport '.\/index.css';\nimport App from '.\/App';\nimport reportWebVitals from '.\/reportWebVitals';\nimport axios from 'axios';\n\/\/ Add a request interceptor\naxios.interceptors.request.use(\n  config => {\n    console.log(\"inside interceptor request\", config)\n\n    const token = \"TOKEN FROM INTERCEPTORS\"\n    if (token) {\n      console.log(\"INSIDE request use\")\n      config.headers&#91;'Authorization'] = 'Bearer ' + token\n    }\n    \n    return config\n  },\n  error => {\n    Promise.reject(error)\n  }\n)\n\n\naxios.interceptors.response.use(\n  config => {\n    console.log(\"inside interceptor response\", config)\n    return config\n  },\n  error => {\n    Promise.reject(error)\n  }\n)\n\n\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  &lt;React.StrictMode>\n    &lt;App \/>\n  &lt;\/React.StrictMode>\n);\n\nreportWebVitals();\n\n<\/code><\/pre>\n\n\n\n<p>App.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import logo from '.\/logo.svg';\nimport '.\/App.css';\nimport { useEffect } from 'react';\nimport axios from 'axios';\n\nfunction App() {\n\n  useEffect(()=> {\n\n    axios({\n      method: 'get',\n      url: 'http:\/\/localhost:1234\/webservice.php'\n    })\n      .then(function (response) {\n        console.log(response)\n      });\n    \n  }, &#91;])\n\n  return (\n    &lt;>\n    This is App component\n    &lt;\/>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p>webservice.php<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\nheader(\"Access-Control-Allow-Origin: *\");\n\n\/\/ echo \"&lt;pre>\";\n\/\/ print_r($_SERVER);\n\necho json_encode(&#91;\"test\" => \"Hello world....\"]);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>index.js App.js webservice.php<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[35],"tags":[],"_links":{"self":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2468"}],"collection":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/comments?post=2468"}],"version-history":[{"count":2,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2468\/revisions"}],"predecessor-version":[{"id":2471,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2468\/revisions\/2471"}],"wp:attachment":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/media?parent=2468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/categories?post=2468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/tags?post=2468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}