Merge pull request #63 from GriGni/bug62

[Client] Catch unsplash cors error

my-app/package.json

@@ -2,12 +2,12 @@
   "name": "my-app",
   "version": "0.1.0",
   "private": true,
-  "proxy": "https://api.unsplash.com",
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.1",
     "@testing-library/user-event": "^12.2.0",
     "axios": "^0.21.0",
+    "http-proxy-middleware": "^1.0.6",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-facebook-login": "^4.1.1",

my-app/src/routes/Mainpage.js

@@ -12,6 +12,9 @@ import Section3 from '../components/main_page/Section3';
 import Footer from '../components/main_page/Footer';
 import { fakeDate } from '../fakeData';
 
+axios.defaults.withCredentials = true;
+
+
 class Mainpage extends React.Component{
   constructor(props){
     super(props);
@@ -26,16 +29,16 @@ class Mainpage extends React.Component{
   componentDidMount(){
     const script = document.createElement("script");
     script.src = "../Animation.js";
-    script.type="text/jsx"
+    script.type="text/jsx";
     script.async = true;
-    document.body.appendChild(script)    
+    document.body.appendChild(script);
   }
 
 
   handleSubmit(value){
     const clientId= this.state.clientId
     const searhResult = value
-    let url = `/search/photos?page=1&query=${searhResult}&client_id=${clientId}` 
+    let url = `/api/search/photos?page=1&query=${searhResult}&client_id=${clientId}` 
     console.log(url)
     axios.get(url).then((res) => {
       console.log(res)

my-app/src/setupProxy.js

@@ -0,0 +1,13 @@
+const {createProxyMiddleware} = require('http-proxy-middleware');
+
+module.exports = function(app){
+    app.use(
+        createProxyMiddleware('/api', {
+          target: 'https://api.unsplash.com',
+          changeOrigin: true,
+          pathRewrite:{
+              '^/api/':'/'
+          }
+        })
+    )
+};