2

I am building a JS Script to capture some data from the URL, this script is installed on a third-party app, so the flow is:

the user opens an URL, the Third part runs my script, my script captures that info and sends that to my server (RAILS 6), and then the third part redirects the user.

my implementation works well in chrome, but not in firefox:

console.log('before send')
try {
  const response = await axios({
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    method: 'post',
    url: constants.SERVER_ADDRESS,
    data: click,
  })

  if (response.ok) {
    console.log(response.json())
  } else {
    console.log('bad server response');
  }
} catch (err) {
  console.log(err)
  console.log(`server error: ${err.message}`);
}
console.log('after send')

so the error that I got in firefox is: 'Error: Request aborted' and the error object doesn't have much more info.

I presume that could be an error related to my server CORS configuration?

 Rails.application.config.middleware.insert_before 0, Rack::Cors do
   allow do
    origins 'localhost:3000', 'myserver.com'

    resource '/api/v1/*',
             headers: :any,
             methods: [:get, :post, :put, :patch, :delete, :options, :head]
   end

   allow do
    origins '*'

    resource '/api/v1/public/*',
             headers: :any,
             methods: [:get, :post, :put, :patch, :delete, :options, :head]
   end
 end

what kind of configuration am I missing? or what am I doing wrong?

EDIT 1:

Looking into the details of the error with: console.log(err.toJSON())

I saw:

    {
  "message": "Request aborted",
  "name": "Error",
  "fileName": "https://server.amazonaws.com/dev.click.js",
  "lineNumber": 667,
  "columnNumber": 15,
  "stack": "createError@https://...\n",
  "config": {
    "url": "http://localhost:3000/api/v1/public/click/",
    "method": "post",
    "data": "{...}",
    "headers": {
      "Accept": "application/json",
      "Content-Type": "application/json"
    },
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1
  },
  "code": "ECONNABORTED"
}

And seeing into the AXIOS Code:

    ...
// Handle browser request cancellation (as opposed to a manual cancellation)
    request.onabort = function handleAbort() {
      if (!request) {
        return;
      }
    
      reject(createError('Request aborted', config, 'ECONNABORTED', request));
    
      // Clean up request
      request = null;
    };

that makes me think is more probably a miss configuration in Axios that makes firefox cancel the request, that make sense?

EDIT 2:

I ran the same routine using fetch instead of Axios, and I had the same result: the request worked well on chrome, but not in Firefox (or other browsers)

Yamit
  • 465
  • 2
  • 6
  • 19
  • I received the same error and what was causing it for me is navigating to another page in the 'then' part. For some reason it was executed before the request completed. So it might have to do something with page reload/refresh happening. as suggested in a comment to this issue:https://stackoverflow.com/questions/67617445/get-error-request-aborted-when-call-axios-get-request – Greg Nov 12 '21 at 05:24
  • The following solution helped me https://stackoverflow.com/questions/61522494/react-axios-error-request-aborted-for-delete-request-in-firefox-but-not-in-chro/63711849#63711849?newreg=3e877f9eb73640d48222cf4f714ca36f – Илья Миронов Feb 10 '22 at 14:18

0 Answers0