fix: CORS bug (decentralized-identity#88)

* [fix] change fetch option 'Access-Control-Allow-Origin': '*' -> mode: cors * [add] resolve sample app by react * [update] remove unused part * [fix] prettier
veramolabs · Nov 9, 2020 · 2a5b5d1 · 2a5b5d1
1 parent 90f73b1
commit 2a5b5d1
Show file tree

Hide file tree

Showing 10 changed files with 28,734 additions and 6 deletions.
diff --git a/example/react-app/.gitignore b/example/react-app/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/example/react-app/README.md b/example/react-app/README.md
@@ -0,0 +1,21 @@
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
diff --git a/example/react-app/package-lock.json b/example/react-app/package-lock.json
diff --git a/example/react-app/package.json b/example/react-app/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "react-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "did-resolver": "^2.1.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "4.0.0",
+    "web-did-resolver": "../../"
+  },
+  "scripts": {
+    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
+    "build": "react-scripts build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/example/react-app/public/index.html b/example/react-app/public/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/example/react-app/src/App.css b/example/react-app/src/App.css
@@ -0,0 +1,10 @@
+.App {
+  text-align: center;
+  height: 100%;
+  width: 100%;
+  padding: 20px;
+}
+
+.App-button {
+  margin-left: 8px;
+}
diff --git a/example/react-app/src/App.js b/example/react-app/src/App.js
@@ -0,0 +1,47 @@
+import './App.css'
+import { useState } from 'react'
+import { Resolver } from 'did-resolver'
+import { getResolver } from 'web-did-resolver'
+
+const webDidResolver = getResolver()
+const didResolver = new Resolver(webDidResolver)
+function App() {
+  const [did, setDid] = useState('did:web:identity.foundation')
+  const [resolved, setResolved] = useState()
+  return (
+    <div className="App">
+      <label>DID:</label>
+      <input
+        type="text"
+        value={did}
+        onChange={(event) => {
+          setDid(event.target.value)
+        }}
+      />
+      <button
+        className="App-button"
+        type="submit"
+        onClick={() => {
+          didResolver
+            .resolve(did)
+            .then((res) => {
+              console.log('resolved data', res)
+              setResolved(true)
+            })
+            .catch((err) => {
+              console.error('failed to resolve', err)
+              setResolved(false)
+            })
+        }}
+      >
+        resolve
+      </button>
+      <p>
+        {resolved === true && `resolved ${did}`}
+        {resolved === false && `failed to resolve ${did}`}
+      </p>
+    </div>
+  )
+}
+
+export default App
diff --git a/example/react-app/src/index.css b/example/react-app/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/example/react-app/src/index.js b/example/react-app/src/index.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+)
diff --git a/src/resolver.ts b/src/resolver.ts
@@ -1,14 +1,10 @@
-import { ParsedDID, DIDDocument } from 'did-resolver'
 import fetch from 'cross-fetch'
+import { DIDDocument, ParsedDID } from 'did-resolver'
 
 const DOC_PATH = '/.well-known/did.json'
 
 async function get(url: string): Promise<any> {
-  const res = await fetch(url, {
-    headers: {
-      'Access-Control-Allow-Origin': '*'
-    }
-  })
+  const res = await fetch(url, { mode: 'cors' })
   if (res.status >= 400) {
     throw new Error(`Bad response ${res.statusText}`)
   }