CODEWITHSUNDEEP
reactjsnode.jsmoraliswagmi
Caseythekiwi
Caseythekiwi

Reputation: 21

How to Resolve CORS Issues in React App with dexFinal Project

I'm working on a project using the dexFinal repository. When I run the project directly, I encounter CORS (Cross-Origin Resource Sharing) issues. Here is the error message I receive:

Access to XMLHttpRequest at 'https://api.1inch.io/v5.0/1/approve/allowance?tokenAddress=0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48&walletAddress=0x1d27d99AC42Acc3A50D390c63b4d4E1d5bc53fD3' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have tried several methods to resolve this issue, including:

1. Using a proxy in setupProxy.js:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'https://api.1inch.dev',
            changeOrigin: true,
            pathRewrite: {
                '^/api': '',
            },
            headers: {
                'Authorization': 'Bearer xxx',
            },
        })
    );
};

2. Configuring Nginx as a proxy:

server {
    listen 80;

    server_name localhost;

    location /api {
        proxy_pass https://api.1inch.dev;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        add_header 'Access-Control-Allow-Origin' '*';
    }
}

Despite these attempts, I still face the same CORS issue. I have confirmed that my front-end application is running on http://localhost:3000 and the API I am trying to access is https://api.1inch.dev.

Steps to Reproduce:

  1. Clone the dexFinal repository.
  2. Navigate to the dex directory and run:
npm install
npm run start
  1. Navigate to the dexBack directory and run:
npm install
node index.js
  1. Connect your wallet, enter the amount of the trading currency, open developer tools (F12), and click "swap" to reproduce the issue.

Has anyone faced similar issues and found a solution? Any help or guidance would be greatly appreciated.

Thank you!

Upvotes: 0

Views: 42

Answers (0)

Related Questions