search

deep-foundation / deepcase-app

https://deep-foundation.github.io/deepcase-app/
The Unlicense
11 stars 6 forks source link

Connector does not allow to connect to remote Deep instance on button click #224

Open Konard opened 9 months ago

Konard commented 9 months ago

Screenshot_20230928_174329

Access to XMLHttpRequest at 'https://deep.deep.foundation/api/gql' from origin 'https://3007-deepfoundation-dev-506i7dtb1c7.ws-eu105.gitpod.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to XMLHttpRequest at 'https://deep.deep.foundation/api/gql' from origin 'https://3007-deepfoundation-dev-506i7dtb1c7.ws-eu105.gitpod.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
connector.js:438 URL error {"error":{"message":"Network Error","name":"AxiosError","stack":"AxiosError: Network Error\n    at XMLHttpRequest.handleError (webpack-internal:///../deepcase/node_modules/axios/lib/adapters/xhr.js:172:14)","config":{"transitional":{"silentJSONParsing":true,"forcedJSONParsing":true,"clarifyTimeoutError":false},"adapter":"xhr","transformRequest":[null],"transformResponse":[null],"timeout":7000,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1,"env":{},"headers":{"Accept":"application/json, text/plain, */*"},"method":"get","url":"https://deep.deep.foundation/api/gql"},"code":"ERR_NETWORK","status":null}}
xhr.js:251     GET https://deep.deep.foundation/api/gql net::ERR_FAILED 200 (OK)

URLs tested: https://deep.deep.foundation/api/gql https://deeplinks.deep.foundation/gql https://3006-deepfoundation-dev-506i7dtb1c7.ws-eu105.gitpod.io/gql

Checklist - [X] `pages/proxy-server.ts` ✅ Commit [`d9810a8`](https://github.com/deep-foundation/deepcase-app/commit/d9810a8cb88e3d81e074520da5981e371d629250)
• Import the necessary modules from 'http' and 'request' packages. • Create a server using 'http.createServer()' method. • In the request handler function, forward the request to 'https://deep.deep.foundation/api/gql' using 'request()' function from 'request' package. • Set the 'Access-Control-Allow-Origin' header in the response to the origin of the web page. • Listen to a specific port for incoming requests.
- [X] `pages/index.tsx` ✅ Commit [`834f2c6`](https://github.com/deep-foundation/deepcase-app/commit/834f2c66c451c95df877b5b6f3523d79f94a1c35)
• Replace the URL 'https://deep.deep.foundation/api/gql' with the URL of the proxy server.
- [X] `pages/client-handler.tsx` ✅ Commit [`a6fef31`](https://github.com/deep-foundation/deepcase-app/commit/a6fef31ef6acfb89fb85596956fc0feef9505188)
• Replace the URL 'https://deep.deep.foundation/api/gql' with the URL of the proxy server.
deep-foundation-sweepai[bot] commented 9 months ago

Here's the PR! https://github.com/deep-foundation/deepcase-app/pull/225.

💎 Sweep Pro: I'm creating this ticket using GPT-4. You have unlimited GPT-4 tickets.

Actions (click)

Step 1: 🔎 Searching

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I looked at (click to expand). If some file is missing from here, you can mention the path in the ticket description. https://github.com/deep-foundation/deepcase-app/blob/7c973a556f781d85b8503363898d1f2a571e1fe5/pages/component.tsx#L1-L154 https://github.com/deep-foundation/deepcase-app/blob/7c973a556f781d85b8503363898d1f2a571e1fe5/pages/index.tsx#L1-L197 https://github.com/deep-foundation/deepcase-app/blob/7c973a556f781d85b8503363898d1f2a571e1fe5/pages/client-handler.tsx#L1-L101 https://github.com/deep-foundation/deepcase-app/blob/7c973a556f781d85b8503363898d1f2a571e1fe5/pages/_document.jsx#L1-L54
I also found the following external resources that might be helpful: **Summaries of links found in the content:** https://deep.deep.foundation/api/gql: The page metadata includes the title "GraphQL Playground" and the content which consists of a logo, loading message, and a JSON object. The JSON object contains an array of tabs, each with an endpoint, query, and headers. The endpoint is "https://deeplinks.deep.foundation/gql" and the query is "query MyQuery { links(limit: 1) { id } }". The headers include an Authorization token. The problem mentioned in the user's query is related to a CORS policy error when making a request to "https://deep.deep.foundation/api/gql" from the origin "https://3007-deepfoundation-dev-506i7dtb1c7.ws-eu105.gitpod.io". The error message states that the 'Access-Control-Allow-Origin' header is not present on the requested resource. The user has tested multiple URLs, including "https://deep.deep.foundation/api/gql", "https://deeplinks.deep.foundation/gql", and "https://3006-deepfoundation-dev-506i7dtb1c7.ws-eu105.gitpod.io/gql". https://3007-deepfoundation-dev-506i7dtb1c7.ws-eu105.gitpod.io: The page metadata does not provide any information about the content of the page. However, based on the problem description, it seems that the user is encountering a CORS (Cross-Origin Resource Sharing) error. The error message states that the access to the XMLHttpRequest at 'https://deep.deep.foundation/api/gql' from the origin 'https://3007-deepfoundation-dev-506i7dtb1c7.ws-eu105.gitpod.io' has been blocked due to the absence of the 'Access-Control-Allow-Origin' header on the requested resource. The user has provided code snippets showing the error message and the URLs that were tested. https://deep.deep.foundation/api/gql"},"code":"ERR_NETWORK","status":null: The page metadata indicates that the user encountered an error with the message "Cannot GET /gql%22%7D,%22code%22:%22ERR_NETWORK%22,%22status%22:null". The user's problem is related to a CORS (Cross-Origin Resource Sharing) policy issue. The error message states that the access to the URL 'https://deep.deep.foundation/api/gql' from the origin 'https://3007-deepfoundation-dev-506i7dtb1c7.ws-eu105.gitpod.io' has been blocked due to the absence of the 'Access-Control-Allow-Origin' header on the requested resource. The user has provided code snippets showing the error message and the URLs that were tested. https://deeplinks.deep.foundation/gql: The page metadata includes the title "GraphQL Playground" and the content which consists of a logo, loading message, and a JSON object. The JSON object contains an array of tabs, each with an endpoint, query, and headers. The endpoint is "https://deeplinks.deep.foundation/gql" and the query is "query MyQuery { links(limit: 1) { id } }". The headers include an Authorization token. The problem mentioned in the user's query is related to a CORS policy error when making a request to "https://deep.deep.foundation/api/gql" from the origin "https://3007-deepfoundation-dev-506i7dtb1c7.ws-eu105.gitpod.io". The error message states that there is no 'Access-Control-Allow-Origin' header present on the requested resource. The user has also provided a list of URLs that have been tested. https://3006-deepfoundation-dev-506i7dtb1c7.ws-eu105.gitpod.io/gql: The page is titled "GraphQL Playground" and it appears to be a playground for testing GraphQL queries. The page includes a logo and a loading indicator. The content of the page includes a JSON object with a "tabs" property, which contains an array of objects representing different tabs in the playground. Each tab has an "endpoint" property specifying a GraphQL endpoint URL, a "query" property containing a GraphQL query, and a "headers" property containing an authorization token. The "canSaveConfig" property is set to false. The problem mentioned in the user's description is related to a CORS (Cross-Origin Resource Sharing) error that occurs when making a request to the 'https://deep.deep.foundation/api/gql' endpoint from the 'https://3007-deepfoundation-dev-506i7dtb1c7.ws-eu105.gitpod.io' origin. The error message indicates that the 'Access-Control-Allow-Origin' header is missing in the response. The user has tested multiple URLs, including 'https://deep.deep.foundation/api/gql', 'https://deeplinks.deep.foundation/gql', and 'https://3006-deepfoundation-dev-506i7dtb1c7.ws-eu105.gitpod.io/gql'.

Step 2: ⌨️ Coding

Step 3: 🔁 Code Review

Here are my self-reviews of my changes at sweep/fix-cors-issue.

Here is the 1st review

Hello, great job on creating the proxy server and updating the URLs in the client-handler.tsx and index.tsx files. However, there are a few changes that need to be made: - In the client-handler.tsx file, the URL of the proxy server needs to be fully specified. This includes the protocol (http or https), the hostname, and the port number. Please update this on lines 71 and 96. - Similarly, in the index.tsx file, the URL of the proxy server needs to be fully specified. Please update this on line 187. Keep up the good work!

I finished incorporating these changes.

🎉 Latest improvements to Sweep:

💡 To recreate the pull request edit the issue title or description. To tweak the pull request, leave a comment on the pull request. Join Our Discord