Issues with CORS

[chlenc]

Hi guys, I'm trying to finalize my contract-based order book and right now working on frontend and ran into a new problem
There is no cors policies in a fuel-indexer service and it's impossible to work with that from localhost frontend

Can you fix that, please? For example, you can add some --allow-corss flag

[ra0x3]

@chlenc Can you:

1. Describe what you're trying to do
2. Describe how you're trying to do this (in very specific commands)
3. Describe your expected result
4. Describe the result you're getting (which I guess is the image you've pasted)
5. Also please paste the Headers section of your request so we can see the HTTP headers

@deekerno We should really create an ISSUE_TEMPLATE.md 😅

@chlenc We're using * for CORS as-is

[chlenc]

@ra0x3 Hi, excuse me for the weak description, let me fix that.

0. In the last issues we made the indexer work well and figured out how to get some data using curl

curl -X POST https://spark-indexer.spark-defi.com/api/sql/swaygang/spark_indexer \
                               -d '{"query":"SELECT json_agg(t) FROM (SELECT * FROM swaygang_spark_indexer.orderentity WHERE status = \'Active\' AND asset0 = \'17e68049bb3cf21a85f00778fde367465bbd8263e8d4f8e47e533fe0df865658\' AND asset1 = \'eaa756f320f175f0023a8c9fc2c9b7a03ce8d715f04ac49aba69d2b7d74e70b8\') t;"}' \
                               -H "Content-type: application/json"

1. I'm trying to get data from the indexer on the frontend side

2.1 Trying using a request with a headers

2.2 Trying to get data from the indexer in the frontend side using a request with a no-cors mode, but this mode resets headers and makes Content-Type: text/plain; charset=utf-8 by default and we get a 415 Unsupported Media Type error

Result is 415

2.3 I also tried to use Axios

3. After I run the fuel-indexer with some flags, I expect to see 200 status codes with successfully executed requests and I hope to see correct data in the response

Repo: https://github.com/chlenc/indexer-test-frontend

[chlenc]

And the same error is in the console of deployed app https://chlenc.github.io/indexer-test-frontend/

[Voxelot]

We likely need to add Method::OPTIONS to the CorsLayer to satisfy the preflight cors check: https://github.com/FuelLabs/fuel-indexer/blob/develop/packages/fuel-indexer-api-server/src/api.rs#L320

[deekerno]

We likely need to add Method::OPTIONS to the CorsLayer to satisfy the preflight cors check: https://github.com/FuelLabs/fuel-indexer/blob/develop/packages/fuel-indexer-api-server/src/api.rs#L320

Huh, TIL. I'll put up a PR for this.

[deekerno]

@chlenc Can you pull down the deekerno/1265-preflight-cors branch, then build and run fuel-indexer from that branch on your server, and try again?

[chlenc]

@deekerno I ran the indexer from your branch locally

git clone git@github.com:FuelLabs/fuel-indexer.git    
cd fuel-indexer
git checkout deekerno/1265-preflight-cors   
docker run -d -p 5432:5432 --name my-postgres -e POSTGRES_PASSWORD=mysecretpassword postgres 
cargo run --bin fuel-indexer run --run-migrations --fuel-node-host beta-3.fuel.network --fuel-node-port 80 --postgres-host 127.0.0.1 --postgres-port 5432 --postgres-password mysecretpassword --postgres-user postgres --accept-sql-queries

And after that deployed the spark indexer

cd ~/projects/fuel/spark/spark-indexer
forc index deploy

[ra0x3]

@chlenc

• We do have a bug, I've updated @deekerno's PR to allow for all headers and more methods

  • So this fixes things on our end
  • We will cut a patch release for you

• Also, there are some issues in your React code

• Below is a more simple version that includes proper headers

import React, { useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
import axios from "axios";

function App() {
  useEffect(() => {
    const response = axios.request({
      method: "POST",
      url: "https://spark-indexer.spark-defi.com/api/sql/swaygang/spark_indexer",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      data: {
        query:
          "SELECT json_agg(t) FROM (SELECT * FROM swaygang_spark_indexer.orderentity WHERE status = 'Active' AND asset0 = '17e68049bb3cf21a85f00778fde367465bbd8263e8d4f8e47e533fe0df865658' AND asset1 = 'eaa756f320f175f0023a8c9fc2c9b7a03ce8d715f04ac49aba69d2b7d74e70b8') t;",
      },
    });
  });

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

[chlenc]

  useEffect(() => {
    const response = axios.request({
      method: "POST",
      url: "https://spark-indexer.spark-defi.com/api/sql/swaygang/spark_indexer",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      data: {
        query:
          "SELECT json_agg(t) FROM (SELECT * FROM swaygang_spark_indexer.orderentity WHERE status = 'Active' AND asset0 = '17e68049bb3cf21a85f00778fde367465bbd8263e8d4f8e47e533fe0df865658' AND asset1 = 'eaa756f320f175f0023a8c9fc2c9b7a03ce8d715f04ac49aba69d2b7d74e70b8') t;",
      },
    });
  });

Thanks a lot ❤️
That works for me, I can continue the development
Can you please tell me approximately when these changes will hit the release?

[deekerno]

I'm starting the release process right now! It should be only a few hours to get all the crates published and the new release available in fuelup.

[chlenc]

Thank you so much, you sirs made my day better, I really appreciate it ❤️✨