Merge branch 'ServerClientTilkoblingFix' into 'master'

Tilkobling mellom server og client

See merge request it2810-h21/team-54/project-3!8

client/package-lock.json

@@ -2229,6 +2229,12 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/cors": {
+      "version": "2.8.12",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
+      "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==",
+      "dev": true
+    },
     "@types/eslint": {
       "version": "7.28.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.1.tgz",
@@ -4371,6 +4377,15 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
     "cosmiconfig": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",

client/package.json

 {
-  "homepage": "https://it2810-h21.pages.stud.idi.ntnu.no/team-54/project-3",
+  "homepage": "http://it2810-54.idi.ntnu.no",
   "name": "project-3",
   "version": "0.1.0",
   "private": true,
@@ -26,7 +26,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://localhost:4000",
+  "proxy": "http://it2810-54.idi.ntnu.no:4000",
   "eslintConfig": {
     "extends": [
       "react-app",
@@ -44,5 +44,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.12"
   }
 }

client/src/components/services.ts

 export function queryFetch(query: String) {
-    return fetch('/graphql', {
+    return fetch('http://it2810-54.idi.ntnu.no:4000/graphql', {
         method: 'POST',
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({

server/package-lock.json

@@ -2292,6 +2292,12 @@
         "@types/node": "*"
       }
     },
+    "@types/cors": {
+      "version": "2.8.12",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
+      "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==",
+      "dev": true
+    },
     "@types/eslint": {
       "version": "7.28.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.1.tgz",
@@ -4669,6 +4675,15 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
     "cosmiconfig": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",

server/package.json

@@ -12,7 +12,7 @@
     "@types/node": "^12.20.33",
     "@types/react": "^17.0.28",
     "@types/react-dom": "^17.0.9",
-    "dotenv": "^10.0.0",
+    "cors": "^2.8.5",
     "express": "^4.17.1",
     "express-graphql": "^0.12.0",
     "graphql": "^15.6.1",
@@ -27,8 +27,8 @@
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "nodemon src/server.ts --exec ts-node",
-    "build": "tsc --build",
+    "start": "nohup node src/server.js &",
+    "build": "tsc src/server.ts",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -49,5 +49,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.12"
   }
 }

server/src/database.ts

 import { createPool , Pool} from "mysql2/promise";
-import dotenv from 'dotenv'
-dotenv.config({ path: ('../.env') });
 
 export async function connect(): Promise<Pool>{
   const connection = createPool({

server/src/server.ts

@@ -4,6 +4,7 @@ var { graphqlHTTP } = require('express-graphql');
 var { GraphQLObjectType, GraphQLSchema, buildSchema, GraphQLInt, GraphQLString, GraphQLList, GraphQLBoolean } = require('graphql');
 
 import {connect} from "./database"
+import * as cors from 'cors';
 
 const MovieType = new GraphQLObjectType({
     name: "Movie",
@@ -187,11 +188,36 @@ const Mutation = new GraphQLObjectType({
 
 const schema = new GraphQLSchema({query: RootQuery, mutation: Mutation})
 
+
 var app = express();
+
+// Add headers
+app.use(function (req, res, next) {
+
+    // Website you wish to allow to connect
+    res.setHeader('Access-Control-Allow-Origin', '*');
+
+    // Request methods you wish to allow
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
+
+    // Request headers you wish to allow
+    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
+
+    // Set to true if you need the website to include cookies in the requests sent
+    // to the API (e.g. in case you use sessions)
+    res.setHeader('Access-Control-Allow-Credentials', true);
+
+    // Pass to next layer of middleware
+    next();
+});
+
+
+app.use(cors());
+
 app.use('/graphql', graphqlHTTP({
     schema: schema,
     // rootValue: RootQuery,
     graphiql: true, // graphql gui
 }));
 
-app.listen(4000, () => console.log('Now browse to localhost:4000/graphql on local'));
+app.listen(4000, () => console.log('Server running on port 4000'));